好久没写页面的我,总结下
line-height
知识点。
line-height
的取值:
- 单位:
line-height: 26px
,直接定义目标元素的行高为26px
的高度。 - 百分比:
line-height: 150%
,与自身的font-size
有关,line-height
值为:font-size
值乘以150%。且如果其层叠子元素没有定义line-height
属性,不管有没有定义font-size
属性,其层叠子元素行高均为21px
(与自身的font-size
没有任何关系)。 - 倍数:
line-height:1.5
,用该方式一般也是配合font-size
属性使用,但是对层叠子元素的影响效果并不同,如果层叠子元素没有定义line-height
属性,但是定义了font-size
属性,那这些层叠子元素的行高为继承过来的line-height
倍数值乘以自身的font-size
属性。
为什么line-height
能设置单行文本垂直居中对齐呢?
类似于用书写英语字母四条线格式,从上至下,依次为顶线、中线、基线和底线。line-height
是行高,即行与行基线之间的距离。
line-height
与font-size
的计算值之差(也就是两行的“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。所以当我们设置单行文本的line-height
为所需要box
的高度,即可实现垂直居中对齐。
参考文章:
CSS行高(line-height)及文本垂直居中原理
css行高line-height的一些深入理解及应用
网友评论