line-height理解

行高的单位

百分比：突出了行高和字体大小的基佬关系当字体行高的单位为百分比的时候，行高以字体大小为依据

em：em这个单位，当作用在行高的时候是以当前文字大小为依据，当作用在字体大小的时候是以当前元素的父元素的字体大小为依据

行高的组成部分

行距+实际高度（不同字体和字体大小组成的高度）

实际高度

组成部分：

由4根线组成：上线 主线（median） 基线（baseline） 下线

（维基官网图）

行距

1.行距就是当行高的大小设置高于了字体大小可以形成的高度的时候其余高度就会自动向两边平分，也就是为什么内联元素可以看上去垂直居中的原因

2.行距是根据line-height和实际高度差自动产生的，也就是为什么css可以设置字体间距大小（letter-spacing），而没有行高大小的样式

拓展

ex

ex的单位的由来，就是x-height的高度（就是基线和主线的中间的距离 ---->维基百科）

基线

就是上图中的哪个红线

作用：就是内联元素的底部对其方式 ---> 浏览器默认vertical-align：baseline 基线对齐

如何判断基线?

一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。 ----> 旭哥总结的

原文：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

注意：transform: translateY(20px);是不会改变基线的（感兴趣的可以自己去尝试）

基线带来的问题？

空白节点

在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。 -- 旭哥

我上文的理解就是其实我们写html的时候回车和空格在其实和文本一样都是文本节点，这一点在js中有提现，所以其实，我们写html，或者浏览器最后渲染的时候会有回车，所以导致了这个空白节点

原文：https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

所以下面的例子我们在一个内联元素后面加一些文字来模拟这些空白节点

 无论我html里有没有写这个回车，最后渲染在浏览器上就是有这个回车

  

    

    我来测试--> 空白节点
  


    .container {
      border: 1px solid red;
    }

    .line-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }

例子反应的问题

1. 出现了空白节点

2.证明了一个inline-block元素，如果里面没有inline内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，这里的line-box里面没元素，那么他的基线就是margin底边缘

3.由span背景图可以看出多出来的空白节点就是基线和下线的距离和行距的下部分的距离

 解决方法：

1.  不让其基线对象，就设置为block元素那么他就不会基线对象
2.  改变行高，设置当行高为0， 那么基线和主线（等其他线）都层叠到中间了，4条线都都向中间移动，4条线统一变为一根线（也就是基线和主线的中间），故而基线和下线的距离就为0，所以就没了给空白的距离
3.  改变行高，还有就是设置字体大小为0，默认line-height：1.2 是以文字大小的百分比来计算的，如果文字大小为0，那么行高就为0

    （个人喜好是设置font-size：0， 给我的感觉就像浏览器少了一步先设置默认line-height的高度我们在吧他改为0的这一步，而在直接跟不上设置font-siez：为0，个人看法，欢迎更正）

行高的作用（line-height）

撑开高度

为什么？

可用这样理解block box （块盒子）的高度在是由line box（行盒子） 影响的，而line box的是由line boxes(这个玩意的工作就是包裹每行文字)决定的，当我们在一个div中写一个span在我们没有对这个div设置高度的情况下，这个div的高度就是由span这个line box（行盒子）决定的，而内联元素的高度由line-height决定了，所以这个line-height间距的撑开了div的高度

inline boxes (这些手下就是文字啦，图片啊，之类的inline属性的标签啦)