css - 宽度为 100% 的 CSS / div 高了几个像素/为什么？

Question

我想建立一个可以扩展到浏览器宽度的网站。

一切正常，除了包含 100%-width-divs 的父 div 总是高约 5 个像素。这给我带来了巨大的问题，因为背景颜色（例如蓝色）在底部溢出。

这是为什么？以及如何解决？:-)

亲切的问候，简

头部代码：

<style type="text/css">

body { background-color:#e7e3d7; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; }    
.banner { width: 100%; }

</style>

正文代码：

<div style="background-color:#0000ff;">

<div><img class="banner" src="http://www.janriggert.com/images/footer.png"></div>

</div>

你看到页脚下方的蓝线了吗？它不应该在那里... :-/

Answer 1

在图像上使用max-width:100%和。display:block

小提琴：http: //jsfiddle.net/RyEqK/1/

Answer 2

添加的公认答案display:block是正确的，但没有涵盖原因。

<img>默认情况下设置为display: inline;. 内联块元素喜欢<svg>并<img>位于文本基线上。他们“在一条线上”（因此是内联的）并遵守线路规则。

底部空间左侧的额外空间用于容纳低于行的文本字符。它们被称为下降器，示例是“y”、“g”等的尾部。

要删除多余的空间，您可以添加display: block;到您的img.

这个 SO 答案非常适合带有大量示例的图像。

这个 SO 答案很好地涵盖了具有相同内联默认值的 svg。