html, css - weird invisible margin below pictures

问题

i’m going bananas here, somehow below all of my images in my page there is a gap, a margin wich isn’t there in the code. Even Firebug can’t see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!

Never happend to me before...!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>

    <div id="container">
        <div id="sidebar">
            <img src="images/logo.png" id="logo" />
            <ul id="menu">
                <li class="menu1">Main</li>
                <li class="menu1">System</li>
                <li class="menu1">View</li>
                <li class="menu1">Policy</li>
            </ul>
            <div id="sidebar_bottom"></div>
        </div>
        <div id="main_content"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

body{
    background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
    width:864px;
    margin: 8px auto 0 auto;
}
#sidebar{
    /*width:139px;*/
    float: left;
}
#sidebar_bottom{
    height:10px;
    background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
    margin-bottom: 2px;
}
#sidebar #menu{
    background: #f2f2f2;
    border: 0 1px solid #cecece;
    margin: 0;
    list-style: none;
}

回答1:

This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.

The easiest solution to this is to simply use display:block; to turn the image into a block element. Floating the image using float:left; or float:right; also works as that also turns it into a block element.

Adjusting properties like the vertical-align, font-size and line-height may also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.

Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue

回答2:

sorry to answer to this question 3 year later, but this page is in first google page and i feel responsibility ..... answer: only add "vertical-align: top;" to img tag inside a tag.

回答3:

For me

font-size: 0;
line-height: 0;

on the wrapping container did the trick.

回答4:

Try to change the DOCTYPE section to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

You can also check this: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

回答5:

Well, I got it.

it was a combination of

font-size: 0px;
line-height: 1;

来源：https://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below-pictures

标签

css

image

margin