高度与线高度样式

问题描述 投票:30回答:5

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

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

谢谢!

html css styling
5个回答
25
投票

height是容器的垂直测量。

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

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

当我想明确设置容器大小和height用于排版布局时,我使用line-height,如果用户调整文本大小,它可能是相关的。


20
投票

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

这是一个fiddle来证明这一点。


0
投票

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


0
投票

假设文本小于容器:

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

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


0
投票

height = line-height + padding-top + padding-bottom

© www.soinside.com 2019 - 2024. All rights reserved.