CSS：为什么行高会扰乱宽度？

Question

CSS中的line-height属性如何工作？如果我将line-height设置为等于或小于字体大小，则会产生布局宽度问题。 Please check this jsFiddle to see the problem.

我使用的是字体大小为14px，行高为14px。如果将line-height更改为15px或更高，则问题将得到解决。 line-height不应该只改变高度，而不是打扰宽度吗？

请看下面的图片，因为您看到#wrap的宽度为300px，现在由于行高，两个宽度为150px的div不适合它。 我已经检查过firefox和chrome，最新版本。

Answer 1

行高是一个继承的属性，但与其他继承的属性相比，它的继承以复杂的方式工作。

有一个很棒的幻灯片演示来说明行高如何工作取决于您指定行高的单位。

http://www.slideshare.net/maxdesign/line-height

向前滑动28解释了您的问题。

Answer 2

它与线高无关......不是直接至少。无论您是否指定行高，两个框都将保持150px宽。 overflow: auto导致出现垂直滚动条（由于我不知道的原因），这会将容器的可用宽度从300px减小到~280px，因此两个彩色框不能再并排显示。如果您移除overflow: auto result will appear as expected。

。{{1}}

修改

修订demo here。为了对抗垂直滚动条，我在容器上添加了1px填充，这似乎可以解决问题。对于较大的字体大小，请使用2px的填充。

Answer 3

在Chrome中，如果我将行高增加到18px，div将并排，但宽度不会改变。显然这与计算#wrap的高度有关。浏览器无法决定是否在#wrap中显示滚动条。但由于#wrap正好是300宽，因此只有当滚动条不显示时才能并排保存两个div，你必须强制隐藏它。将#wrap溢出更改为hidden，或完全删除此属性。