首页 > 代码库 > line-height

line-height

1.定义:两行文字基线(baseline)之间的距离。中文为行高。在英文字母中,基线位于部分英文字母(x,i,n等)下端边缘线处(跟字体有关,会有一些细微差距)。

         

2.line-height与行内框盒子模型。

 

<p>line-height<em>em</em></p>

 

    内容区域(content area)是围绕文字line-height的不可见的盒子。与font-size,font-family有关。

    内联盒子(inline box),即围绕内联元素em的不可见的盒子,对于没有标签的文字,称为匿名内联盒子。

    行框盒子(line boxes)由一个个内联盒子和内容组成的一行的不可见的盒子。

    包含盒子(containing box)由一个个行框盒子组成,即P元素。

技术分享

      对于一行文字,client height由line-height决定。见上图,即background的宽度与line-height有关。可是line-height定义明明是两基线之间的距离,

为什么单行文字也有line-height呢。因为高度的表现是由内容区域和行间距决定的,而它们之和等于行高。

       line-height=content area  +vertical spacing

       content area 与字体font-family和字体大小font-size有关

3.行高能让单行文本垂直居中吗?(什么是垂直居中,参见垂直居中的六种方法)

    仅仅只是看起来垂直居中。

 

line-height