line-height深入理解

昨天看了一篇文章，加上以前css权威指南的讲解，又加深了对line-height的认识，学到了就要记录！不然久了就又忘了……

原文：http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align?utm_source=CSS-Weekly&utm_campaign=Issue-253&utm_medium=web

 

对于块级元素来说，line-height很好理解，难点在于行内元素。

首先说明 这里的行内元素 不包括：

1.替换行内元素 例如img input等。

2.display为inline-block 或者inline-*类的元素

3.flex中的行内元素，flex items 都是被块化了。

 

“Each HTML element is actually a stack of line-boxes. If you know the height of each line-box, you know the height of an element.”

这句话是说每个元素都是由一个个的line-boxes组成的，这个元素的高度就为每个line-box的高度和。

那么！重点来了，line-box的高度由什么决定？

example：

<p>
    Good design will be better.
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
    We get to make a consequence.
</p>

p标签下有两个匿名行内元素，三个span

 

关于font-size：

为三种不同字体设置相同 大小，得到的结果大小其实是不一样的。愿意是，每个字体有个em框(content-area)的概念，而linebox高度会由这一行中所有em框共同决定

简单说，font-size不能直接决定字体大小，它是间接影响，还有一系列关于字体的参数……缩放比例等，所以不同字体可能会得到不一样的大小。font-size只能关系到content-area 的高度，就是能容纳字的高度。但是这个并不能决定line-box的高度。

还需要line-height来决定，line-height官方解释是基线到基线的距离，但是这篇文章中的观点是 （line-height - font-size）如果为正，就／2分别加到字体内容框上下，形成的框。如果为负数，相当于差值从内容框上下分别减少形成的框，最终这个框的高度就是元素的高度。

 

不信可以试一试，我给p元素设置了背景，根据背景可以看出高度由几个span形成的linebox高度决定，

我给a设了边框，你可以给a元素增加padding ，margin等可以看到这个框变大变小，但是你看不到p的背景色变化，所以我们看到的框大小并不代表是这个行内元素的实际大小！可以设置line - height和font-size，没有vertical-align的情况（等会说这个熟悉），来观察p的高度变化。

p  { font-size: 0;background: yellow; }
 .a { 
            font-family: Helvetica;
            border:1px solid red;
            padding: 10px;
            font-size: 18px;
            line-height: 0;
}
    

<p>
    <span class="a">Ba</span>
   
</p> 

好了 第二个重点  vertical-align，一个line-box可能由不同的内容框构成， line-box的高度由这些内容框行高+对齐方式决定，

对齐方式：默认是baseline对齐,懒得打字了 ，直接引用：

• vertical-align: top / bottom align to the top or the bottom of the line-box
• vertical-align: text-top / text-bottom align to the top or the bottom of the content-area

注意一点：这里对齐的时候，说的都是对齐元素的 最后高度框（line-height作用后的em框），作者给它取了个命叫 virtual height。

设置了vertical-align属性后，这些框的位置会改变，最后也会影响line-box的高度。

 

总结差不多了～略潦草，主要是为了给自己看 - - 

以后学到的东西还是要记下来！！不要因为懒的打字，就荒废博客太久……