19

再次希望你能帮助我。

我是 css 的新手，并试图构建一些简单的东西，但即使是简单的也变得非常困难:(。这个问题已经有一个小时了。

我现在遇到的任何问题是我有一个内部有图像的 div，但是 div 在底部有 5px 的额外空间，我只是不知道如何删除。

基本上这就是我所拥有的

在此处输入图像描述

如您所见，图像下方有一点“空白”空间。

这就是我想要的（使用油漆编辑）

在此处输入图像描述

基本上我的主体是灰色背景，里面有一个宽度为 70% 的包装，

包装器内部有一个菜单（红色的小东西是该菜单的一部分），然后有一个背景为白色的 div（id=container），宽度为 142.8571%，左侧为 15%，以便覆盖整个页。然后在这个 div 里面是图像。

所以基本上有问题的 div 是带有 ID 容器的 div。

这是我相关部分的代码

HTML：

<div id="container">

    <img id="banner-img" src="img/banner.jpg">

</div>

CSS：

#container{

    background-color: white;

    padding-bottom:0px;
    margin-bottom: 0px;
    border-bottom-width: 0px;


    width: 142.8571%;

    position:  relative;
    left: -21.428571%;




}

#banner-img{
    position: relative;
    margin: 0px auto 0px auto;
    width: 70%;
    left: 15%;
    height: auto;
    padding: 0px;
    border: 0px;
    position: relative;

}
4

3 回答 3

54

现在习惯了

img, #banner-img{
vertical-align: top;
}
于 2012-07-12T08:20:08.513 回答
30

另一种解决方案是将图像设置为block：

img { display: block; }
于 2012-07-12T08:23:04.483 回答
1

底部的空白区域可能是图像标签和结束 div 标签之间的 CR/LF。有些浏览器不喜欢这样。可能有一个 CSS 解决方法，但我倾向于删除 CR/LF 并将其全部放在一行上，如下所示：

<div id="container"><img id="banner-img" src="img/banner.jpg"></div>
于 2012-07-12T08:28:04.047 回答