div容器比图片内部更大

Question

希望您能再次帮我一下。

我是 CSS 的新手，试图构建一些简单的东西，但连简单的都变得非常困难 :(，现在已经卡了一个多小时了。

我目前遇到的问题是，我有一个包含图像的 div，但是 div 底部有额外的大约 5px 的空间，我无法弄清如何删除它。

基本上这就是我所拥有的：

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

这是我想要的效果（使用 paint 编辑）：

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

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

因此，有问题的 div 就是 ID 为 container 的 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;

}

- Ahmed-Anas

Answer 1

现在习惯了这个

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

- Rohit Azad Malik

---

谢谢，太烦人了，修复如此简单。如果您不介意，能否解释一下为什么这样修复问题？ - Ahmed-Anas

因为img标签在inline-block元素中，而inline-block元素默认垂直居中，所以我们需要将所有的inline-block元素的vertical-align属性设置为top。 - Rohit Azad Malik

Answer 2

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

img { display: block; }

- PeeHaa

---

是的，那个有效。谢谢。如果您不介意，能否解释一下为什么它有效（因为我正在学习 CSS，想知道这些事情发生的原因 :)）？ - Ahmed-Anas

和Rohit Azad所说的原因一样。 - PeeHaa

技术解释可以在W3规范中找到：http://www.w3.org/TR/CSS21/text.html#white-space-model；这里有一个很好的摘要以及许多解决方法：http://css-tricks.com/fighting-the-space-between-inline-block-elements/。 - feeela

Answer 3

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

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

- AW101

---

这并不是浏览器的问题。CSS规范中提到了这种情况：行内元素之间的空白会被显示出来。解决方法如PeeHaa所述：将该元素的display属性设置为block。 - feeela

因此，删除内联元素之间的空格也应该有效。一些浏览器确实存在渲染CSS的问题，特别是旧版本的浏览器。在所有浏览器中可靠地工作的唯一方法是删除空格。 - AW101

是的，但我不会将其用作解决方法，因为HTML可能是由JS文本编辑器（如TinyMCE）生成的 - 在那里您无法完全控制标记。我会使用一些CSS解决方法。 - feeela

真的，但如果不是的话，这是一个选项。 - AW101