宽度为 100% 的 CSS / div 高了几个像素/为啥？

Posted 2023-03-06

【中文标题】宽度为 100% 的 CSS / div 高了几个像素/为啥？

【英文标题】：CSS / div with width 100% is a few pixels too high / why?宽度为 100% 的 CSS / div 高了几个像素/为什么？

【发布时间】：2013-05-05 22:32:26

【问题描述】：

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

一切正常，除了包含 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>

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

【问题讨论】：

我检查了 BBEdit 和 Safari。你能复制这个问题吗？

【参考方案1】：

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

<img> 默认设置为display: inline;。像<svg> 和<img> 这样的行内块元素位于文本基线上。它们“在一行中”（因此是内联的）并遵守行规。

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

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

This SO answer covers it really well for images with lots of examples.

This SO answer covers it well for svgs, which have the same inline default.

【参考方案2】：

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

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

【讨论】：

哇！你值得敬畏！太感谢了！ :-D

@SergejPopov 问题是“为什么？”你没有解释（基线，内联元素为下降等留出空间）

@MrLister，这个问题不仅是“为什么”，还有“如何”，我不知道“为什么”，所以也许你可以用单独的答案来启发我们。我会投票。

@SergejPopov 我添加了为什么答案。 8年后。 :)

@JoshuaDance 哈哈。好的。正如所承诺的 - 赞成：D