为什么line-height会增加额外的高度？

Question

<div><iframe style="height: 100px"></iframe></div>
<div style="line-height: 0"><iframe style="height: 100px"></iframe></div>

http://jsfiddle.net/p6SD4/

如果检查DOM，可以看到第一个div的高度为108px，而第二个div的高度为104px。带边框的iframe是104px，那么为什么在设置line-height的时候还要添加4个额外的像素呢？

已在Mac版Chrome 28.0.1500.71上测试。

Answer 1

因为iframe位于基线上。但是div必须足够高，以容纳strut，它低于基线，其高度由行高度决定。

0line- height = 0px支柱高度= 0px基线以下支柱的高度。

使用iframe { display:block; }、iframe { vertical-align:top; }或iframe { vertical-align:bottom; }来阻止这种情况的发生。

(显示:阻止创建线框，因此没有支撑。垂直对齐:顶部和垂直对齐:底部释放支柱，使其不与iframe共享线框的基线，因此支柱放置得更高，这样它的任何部分都不会低于iframe的底部。请注意，如果行高大于iframe高度，则无论垂直对齐设置如何，支撑会强制行框高度，从而使div高度仍然大于iframe高度)

Answer 2

在Chrome28中，这两个div似乎都是109px高。请记住，<iframe>元素和所有内联元素的缺省基线值是vertical-align -将其更改为bottom将使这两个元素对齐，这可能是您所期望的。

http://jsfiddle.net/p6SD4/1/

Answer 3

这可能取决于您的浏览器。对于Firefox和Chrome，两个IFRAME元素的高度都是104px (100px + 4px的边框)。

您使用的是哪种浏览器？您尝试过border="0“吗？