'Line-height: 1' in CSS reset causes HTML background to extend

StackOverflow https://stackoverflow.com/questions/18422592

سؤال

I've been trying to figure out why there's a thin (maybe 1px) line at the bottom of my layout and finally pinpointed the body {line-height: 1;} in Eric Meyer's reset file. For some reason, this setting is causing the html element to extend just past my footer.

I tried this out on a super simple page with just a main div with a background color of gray, setting the html background to red so I can see the line at the bottom of the window. Playing around with height settings on the main div, p tag, or an img, the line only disappears when the main div has a height setting. (I tried to use that information to fix my actual project, but it doesn't seem to work there...)

I made a simple jsfiddle if you want to see what I'm talking about - http://jsfiddle.net/DFDj8/ - changing the #main img {height: 800px;} to just #main {height: 800px;} gets rid of the red line at the bottom. Commenting out the line-height setting in the reset does the same.

Any thoughts on what's happening? If there's another post that explains this, feel free to link to it - I couldn't find anything similar.

Thanks!

*Updated jsfiddle with block-level footer as last element - http://jsfiddle.net/DFDj8/6/

The code in jsfiddle contains Eric Meyer's reset plus the following:

html, body {
    background: red;}
#main {
    background: gray;}
#main img {
    height: 800px;
    display: block;}


<body>
    <div id="main">
            <p>paragraph paragraph</p>
            <img src="http://auntdracula.com/wp-content/uploads/2013/05/Delicious_Steaz_Soda.jpg" />
    </div>
    <footer>
        <p>&copy; 2013</p>
    </footer>
</body>
هل كانت مفيدة؟

المحلول

First off, I made a simplified fiddle with all the unnecessary stuff, like the reset codes, removed. I don't like reset codes, as they can just get in the way when doing research.

Anyway, I noticed that when you decrease the line-height even further, the number of red pixels increases. So it has to do with the room for the descender below the image.
That means if you add display:block to the style for the img, the problem will disappear. See newer fiddle.

Then you won't have to worry about other, seemingly unrelated properties any more.

Edit: it also goes wrong if there's a line of text as the last element in the body. Apparently, the font's descender is too large for that line height, and it overflows out of the line. And therefore, out of the body. So the solution is to hide the overflow of that element.

body :last-child {overflow-y:hidden}

See more updated fiddle.

Or, in this case, a solution would be to keep the line-height at 1.2, but then you might have the same problem with more esotericly shaped fonts...

نصائح أخرى

The last element is display: inline by default and the line-height is acting on it as it should. Set the image to display:block; and you won't have that issue.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top