Most folks assign a line height that is larger than the default as I showed in my image in post #94. (Do you read these things that I write? I don’t mind not wasting the time writing them if you do not read them. Just let me know.) For example, I usually assign a line height of 1.35 or 1.4 to paragraphs which overrides the default line-height of 1.2 and makes the text easier to read.
But, I rarely assign a smaller-than-default line height. Smaller-than-default would cram the text closer together in a paragraph (as shown in my image) so it is reserved for special, one line or one object occasions, and then infrequently.
Most of the time, I go with the default line height unless it presents a problem.
Before you change line heights to something smaller than default, reduce the vertical margins as low as zero and see if that solves the positioning issue. If it does not, then consider reducing the line height of that element.
LIne height is a moderately complex property. If you are thinking it’s OK to reduce line-heights to small values, I strongly suggest reading about line-heights anywhere and everywhere you can.
I would not have assigned a line-height to .hr6, unless there was a problem that required it. And I can’t see one anywhere.
Not that I’ve written tons of CSS, but IIRC I have never specified a line height. The default has never been a problem.
I’m guessing that’s mainly because I have only rarely cared to use “special” fonts. And I’m guessing it is fonts with greater ascenders and descenders than what I’ve used where a greater line height would be more important.
They need {margin:0} because of the way the page is coded. {margin:0} is not wrong. However, like most properties, {margin:0} does not live in a vacuum. The same results can be had different ways. Sometimes one method is better than another. Sometimes it doesn’t matter which method is chosen.
Try this:
.outer {
max-width:818px; /*828 */
border:5px solid #38761d;
background-color:#000;
/* padding-bottom:22px; /* comment out this padding */
margin:0 auto;
}
.hr6 {
color:white;
text-align:center;
font-style:normal;
font-family:georgia;
font-size:28px;
/* padding:18px 0 0; /* comment out this padding */
/* margin:0; /* comment out this margin */
}
Reload the page and see what it looks like with the default margin and none of the other paddings. You will probably need to adjust the margin-top and margin-bottom of .hr6.
If you would like to experiment with .hr3, we can.
How do the elements look on the page? If not spaced too far apart, then you can just assign vertical (top and bottom) margins to .hr6 and you should be able to restore 315px of height on your computer IF the position of .hr6 looks OK to you.
Try this as a starting point and let’s see what happens: {margin-top:12px; margin-bottom:12px;}
tweak from there.
Sometimes the choice boils down to coder’s preference and sometimes there is a structural reason why one is used instead of the other but that is case dependent.
Answer to “all”… in this case, a reduction of at least three lines of CSS (four lines if you also eliminate the line-height from .hr3) reaults in simpler, easier to understand and modify, CSS.
We began by addressing the padding-bottom in .outer and the combination of padding and margin in .hr6. By applying margins in .hr6, one can eliminate the padding-bottom in .outer and the padding in .hr6. So you accomplish the same “look” with fewer lines of CSS.
I cannot argue that replacing the padding with margin in .hr3 serves any useful structural advantage other than simplifying the code a little.
… but it IS a great learning exercise, isn’t it?
Learning experiences are always good, IMO.
