对于行高(line-height)的一些理解

Posted 2020-06-22 Benson.Cai

刚一开始学习这个特性的时候，总是出一些当时看起来很奇怪的问题。现在决定重新整理一下。毕竟使用css，十行揉在一起凑出效果是一种使用，知道为什么会有这种效果也是一种使用。我们需要做一些测试，所以首先需要了解一下到底哪些DOM元素适合。

那我们第一个问题就来了。

line-height可以应用于哪些元素

* line-height只影响行内元素，并不能直接应用于块级元素。
* line-height 具有可继承性，块级元素的子元素会继承该特性，并且在行内元素上生效。

所以，我们在这里可以只考虑行内元素，包括行内替换元素和行内非替换元素，img和span可以分别作为它们典型的代表。

什么是line-height

对于这个问题一直感觉很困惑。定义上说，line-height就是两个文本行基线之间的距离，难道就是像下图这样子:

但是问题来了，如果我分别给两个元素设置了line-height, 那么哪个line-height是这两个文本行之间的距离？ 我写了如下的测试代码：

<div style="width:170px;">
     <span style="font-size:16px;line-height:20px;background:red;">I‘m the first line</span>
     <span style="font-size:16px; line-height:40px;background:green;">I‘m the second line</span>
</div>

得到结果如图：

我们可以知道上面一行的行框高度是20px，下面一行是40px。我们就可以算出两行文本基线之间的间距，应该是(20 - 16) / 2 + (40 - 16) / 2 + 16 = 30。 这个数据看起来和两个元素的line-height并没有什么关系。 这便是我当时理解这个概念时走入的误区，实际上，line-height指的是在同一个元素中，两个文本行基线间的距离。如下图所示：

只怪我反应太慢。所以，当我明白这个事情以后，就不对它到底是什么耿耿于怀了。开始关注于它的作用，它是怎样影响行内框的高度，进而影响整行的行框的高度的。

与height的关系

类似于span的行内非替换元素，我们知道它们的高度并不能通过height直接设置，但是可以由line-height来改变。

类似于input，img的行内非替换元素，在line-height的设置上和块级元素类似，line-height在自身上并没有起作用，但是可以应用到子元素上。它们的行内框的高度就是它们内容区的高度，是可以通过height来设置的。

总之呢，这两个css属性并没有什么关系。

line-height与height相等，为什么会使文字居中

这大概是大家会经常遇到的一个问题，大概也是单行文字居中的惯用手段。我思考了一下原因，并且做了一些测试:

<span style="height: 40px;line-height:40px;background:red;display: inline-block;">I‘m the first line</span>

显示如下：

我去掉line-height属性，显示如下：

原因是这样的。文本是属于textNode，它也是一个DOM元素。当外层元素设了line-height之后，它自然继承过来，就像我们上文中说过的一样，显示在中央，是因为文字自然的落在了textNode的基线上面。

理解了上面所说的这些，我们就能理解为什么有时候设line-height和height相等不起作用了。如下图代码：

 <span style="height: 40px;line-height:40px;background:red;display: inline-block;padding: 3px;box-sizing:border-box;">I‘m the first line</span>

结果如下图所示：

我加了padding和border-box，也就是说外层的span的内容区域缩小了，但是里面的textNode并没有什么变化。

好了，感觉总算是弄明白了一个事情。看上去它也不是如狼似虎。

地址：http://www.html-js.com/article/3465

转自：nanshan231--前端乱炖