对于行高(line-height)的一些理解
发布在CSS2016年3月12日view:4359css3
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

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

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

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

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

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

什么是line-height

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

但是问题来了,如果我分别给两个元素设置了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>

得到结果如图: enter image description here

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

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

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

显示如下: enter image description here

我去掉line-height属性,显示如下: enter image description here

原因是这样的。文本是属于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>

结果如下图所示: enter image description here

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

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

评论
发表评论
暂无评论
WRITTEN BY
nanshan231
无知者无畏,但是恐惧也是因为无知
TA的新浪微博
PUBLISHED IN
CSS

点滴之间,学习做一个全栈工程师

我的收藏