Question

在处理永远不会超过一行的文本时，使用这两者有什么区别？它们可以在屏幕上产生类似的结果，从我可以看到的元素顶部或底部的元素。如果是这样，为什么要使用行高呢？使用高度更有意义。

编辑：这是一个程式化按钮的示例，该按钮是从内部带有文本的div创建的。这永远不会是多线的。那么出于兼容性原因需要行高吗？或者我不知道的任何事情？

谢谢！

Answer 1

height是容器的垂直测量值。

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

如果仅使用一行文本，我希望它们在大多数情况下会产生类似的结果。

当我想明确设置容器大小时使用height，并为排版布局使用line-height，如果用户调整文本大小，则可能会相关。

Answer 2

如果你将文本包装在一个div中，给div一个高度，然后文本增长为2行（也许是因为它在像手机一样的小屏幕上观看），那么文本将与下面的元素重叠它。另一方面，如果你给div一个行高，文本增长到2行，div就会扩展（假设你也没有给div一个高度）。

以下是展示此内容的fiddle。

Answer 3

出于实际目的，在您引用（从不包装到多行）的情况下，行高将垂直居中于文本。尽管用户最终控制了字体大小，但要小心这个假设。

Answer 4

假设文本小于容器：

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

如果在容器上设置高度，则容器将垂直增长，但其中的文本将从其内部的第一行（顶部）开始。

Answer 5

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

Answer 6

通过查看此示例可以轻松理解。

.height
{
    height: 20px;
}

.lheight
{
    line-height: 15px;
}

.lheightbigger
{
    line-height: 35px;
}

<h2>Height</h2>
<div class="height">
  This is demo text. This is demo text.
  This is demo text. This is demo text. 
  This is demo text. This is demo text.
</div><br>
<h2>Line Height with less space</h2>
<div class="lheight">
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example. This is demo text showing line height example.
  This is demo text showing line height example.This is demo text showing line height example.
</div>
<h2>Normal Text</h2>
<div>
  This is normal text.
  This is normal text.
  This is normal text.
</div>
<h2>Line Height with more space</h2>
<div class="lheightbigger">
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
  This is normal text. This is normal text.This is normal text.
</div>

高度与线高度样式

6 个答案: