高度与线条高度造型

处理文字永远不会超过一条线时，使用这两种文字有什么区别？它们都可以在屏幕上产生类似的结果，从我可以看到的有关元素顶部或底部的元素。为什么要使用行高？身高会更有用。高度与线条高度造型

编辑：从文本中的一个div创建这个程式化按钮的一个例子。这绝不会是多行的。那么为了兼容性的原因需要行高？或者我不知道的任何事情？

谢谢！

height是容器的垂直测量值。

line-height是从第一行文本的顶部到第二行的顶部的距离。

如果只有一行文字的使用，我期望他们能够产生在大多数情况下类似的结果。

我使用height当我想明确地设置容器大小和line-height印刷布局，它可能是相关的，如果用户调整文本大小。

2011-09-30 22:23:14

校正。行高与第二行文本的位置无关，仅基于内联框本身。 – Rob

这是另一个带有[css-tricks]（https://css-tricks.com/almanac/properties/l/line-height/）例子的教程，如果这样做更有意义。 –

对于你引用（从来没有包装，以多行）行高度将垂直居中文本的情况下，实际的目的。尽管用户最终控制字体大小，但请注意这一假设。

2011-09-30 22:22:30 steveax

如果将文本包装在div中，给div一个高度，并且文本增长为2行（可能是因为它正在像手机这样的小屏幕上查看），那么文本将与元素重叠在它下面。另一方面，如果您给div一个行高并且文本增长到2行，则div将展开（假设您不给div一个高度）。

这里是一个fiddle演示这一点。

2011-09-30 22:33:24 DwB

在阅读[this]之后登陆SO（https://github.com/csswizardry/CSS-Guidelines）。 DwB的答案应该有更多upvotes。 –

假设文本比容器更小：

设置在容器上的行高指定在其内部线盒的最小高度。对于1行文本，这会导致文本在容器内垂直居中。

如果您在容器上设置高度，则容器将垂直增长，但它里面的文本将开始它里面的第一个（顶部）行。

2016-03-03 12:28:59

高度 = 行高 +填充顶+填充底部

2017-12-28 21:19:44

回答