【问题标题】：CSS: why line-height disturbs the width?CSS：为什么行高会干扰宽度？
【发布时间】：2011-11-22 13:02:38
【问题描述】：

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

我使用的字体大小为 14 像素，行高为 14 像素。如果把line-height改成15px以上，问题就解决了。 line-height不应该只改变高度，不干扰宽度吗？

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

【问题讨论】：

当我改变它时，我只看到行高的差异。宽度不变。你有什么浏览器？
你测试的所有浏览器都会出现这个问题吗？
我刚刚编辑并添加了截图。
Line-height 是much more complicated，而不是看起来。看起来我的浏览器（Firefox 6.0.2）上的问题是由于宽度不足，滚动条的存在将第二个浮动 div 推到第一个下方。这可能只是浏览器如何呈现此示例的结果。
@是的，在 Firefox 中，如果您将 line-height 增加到 15px，<div>s 将并排显示。

标签： css

【解决方案1】：

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

有一个很好的幻灯片来说明 line-height 如何根据您指定的 line-height 单位工作。

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

幻灯片 28 以后解释了您的问题。

【讨论】：

【解决方案2】：

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

编辑

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

【讨论】：

当然，删除行高并保持溢出。或者在ff中将行高增加到15px或在chrome中增加到18px，并保持溢出，它不会有任何问题。所以问题是由行高引起的，而不是溢出。
没有。它是由溢出引起的。在上面的演示中，我使用了 14px 的行高，更高的内容呈现在 7 行上。 7x14 像素 = 98 像素。如果将溢出设置为隐藏，#wrap 将拉伸到 98px 并且不添加滚动条。如果将溢出设置为自动，浏览器（错误地）会添加垂直滚动条，这会破坏布局。如果您可以在没有scrollbar: auto 的情况下生活，那没有问题。如果需要scrollbar: auto，我有一个解决方案。请告诉我。
我必须同意@Salman，行高没有问题。您还可以通过向#left 和#right 列添加明确的权利来解决此问题

【解决方案3】：

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

【讨论】：