行高计算

行高计算

在行内格式化上下文中,UA把行内级别的盒子放入行框组成的竖直堆栈。行框的高度由下面规则确定:

1.计算每个行内级别元素的高。对可替换元素、行内块元素、行内表格元素,这个高是它们的marign 盒子的高;对行内盒子来说,这是它们的行高。(参阅:leading,行内盒子的高,高和margin的计算)

2.行内级别的盒子根据'vertical-align'属性竖直对齐。当‘top',’bottom‘对齐的时候,可以减少行高。
3.行框的高是框最上面到框最下面之间的距离。(包括strut)

空的行内元素产生空行内盒子,但是这些盒子依然由margin,padding,border和行高,这些同样会影响行框的计算。

Leading 和 half-leading

CSS假设每一个字体都有字体大小,这指定特定的高在基线上面和深在下面。在这里,我们用A指代高(对给定大小的字体)D指代深度。定义 AD= A + D(AD,从上到下的距离)

UA以相应字体的基线来对齐这些在非替换行内盒子中的字体。然后,对每个字,计算A和D。一个元素中的字可以有不同字形,因此不需要都有相同的A和D。如果一个行内盒子不包含字,这个盒子包含的是strut(一个0宽的不可见字)。这个strut有这个元素第一个可用字体的A和D。

对每个字符,通过 L=‘line-height’ - AD来计算leading。一半的leading在A上面,一半的leading在D下面。

Leading 可能为负值

尽管非替换元素的margin,border,padding不参与行高计算。它们仍然渲染在行内盒子周围。

原文地址:https://www.cnblogs.com/diaoxiong/p/5685648.html