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; }