高度与线高样式

Question

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

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

谢谢！

Answer 1

height 是容器的垂直测量值。

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

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

当我想显式设置容器大小和排版布局的行高时，我使用高度，如果用户调整文本大小，它可能会相关。

Answer 2

如果将文本包裹在 div 中，给 div 指定高度，并且文本将增长为 2 行（可能是因为在手机等小屏幕上查看它），则文本将与其下方的元素重叠。另一方面，如果您为 div 指定了行高，并且文本增长到 2 行，则 div 将扩展（假设您没有为 div 指定高度）。

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

Answer 3

假设文本小于容器：

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

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

Answer 4

高度 = 行高 + 顶部内边距 + 底部内边距

Answer 5

看看这个例子就很容易理解了。

.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>

Answer 6

出于实际目的，在您引用的情况下（不要换行超过一行）行高将使文本垂直居中。但要小心这个假设，因为用户最终控制字体大小。