Question

我的网页上有一个简单的布局

<body >
<div id="page">
        <div id="header">
            <img src="Images/home.jpg" style="width:100%;" />
        </div>      
 </div>
</body>

我的样式表内容是

body, html{
    margin:0px;
    padding:0px;
}

#page
{
    position:relative;    
    width: 960px;
    margin:0px auto;
    padding:0px;
    -webkit-box-shadow: #222 0px 0px 8px;
    -moz-box-shadow: #222 0px 0px 8px;
    box-shadow: #222 0px 0px 8px;    
    background:url('../../Images/headbg960.jpg');
}

#header{
    padding:30px 90px 0px 90px;
    margin:0px;
}

我无法弄清楚为什么图像底部和标题的下边缘之间存在5px的间隙。在CSS中的任何技巧产生这个？我该如何解决？感谢。

Answer 1

内联元素此类图像受whitespace

的约束

制作图片display:block。

Answer 2

通过在图像上应用display: block可以解决此问题。因此，在样式表中，您需要添加

#header img {
    display: block;
}

Answer 3

将vertical-align:top;添加到图片的CSS中：style="width:100%;vertical-align:top;"。

<强> jsFiddle example

如何消除差距

3 个答案: