css中行高到底指的是什么了?
line-height称之为行高,顾名思义是指行的高度,目前的主流说法是指两行文本之间基线之间的垂直距离,line-height实际距离指两个半行间距(上一行文本底线与下一行文本的顶线之间垂直距离的二分之一)加上字体本身高度。
也有人并不赞同上述说法(他认为行高并非指的是两行文本之间基线的距离),对于行高 的解释有自己的一套解释方法,
-
可以看看这位作者是怎么认为的
该作者认为line-height即是两个leading(line-height与font-height的高度差的二分之一)加上字体高度(他称之为content area 即内容区的高度),之所以文本默认在行框中显示为居中状态,上下有间隙,是因为浏览器默认给line-height设置有高度,一旦给文本设置有高度,那么相当于在文字上下添加了两个高度相等的leading,这样就出现了浏览器文字的默认效果,即文字在单行文本中居中,而且上下有间隙。
引申一下inline-box模型的概念
line-box模型大致有这么几个概念,line-box(行框),当一行行内元素(inline-element)处在同一行时,这一行会生成一个line-box,当然这个盒子你是看不到的,也无法通过css来控制显现出来,而对于每个行内元素会生成一个inline-box(内联盒/行内框),这个行内框的高度实质上就是line-height,而line-box的高度可以视为是由最高的那个inline-box所撑开的,因此对于一个line-box而言其高度就是其内部inlne-box的最大line-height。
由上述我们得出一个结论:
- line-box的高度等于其内部inline-box的最大line-height,
- 如果这个line-box内部的inline-box都是文本,那么出现的效果应该是单行文本垂直居中。
- 但是如果这个line-box不只是文本这种内联框还有图片等不同line-height的内联框时,还能保持整体的行内垂直居中对齐吗? 简单测试一下,我们可以看出,对于上述情况并未能够实现文字和图片都垂直居中