div容器比图像里面大

Question

再一次希望你能帮助我。

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

我现在遇到的任何问题都是我有一个内部有图像的div，但div底部有5px的额外空间，我无法弄清楚如何删除。

基本上这就是我所拥有的

正如您所看到的，图像下方有一个“白色”空间。

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

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

在包装器里面有一个菜单（小红色的东西是该菜单的一部分），然后有一个div（id =容器），背景是白色，宽度是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;

}

Answer 1

现在习惯了这个

img, #banner-img{
vertical-align: top;
}

Answer 2

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

img { display: block; }

Answer 3

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

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