line-height和vertical-align

总结一下line-height和他的好朋友vertical-align。

幽灵空白节点

在HTML5文档声明中，内联元素的所有解析和渲染变现就如同每一个行框盒子之前都会有一个’空白节点’，这个’空白节点’没有宽度，永远透明。

<div style="background-color: red;">
  <span style="display: inline-block;">span>
div>

写下如下代码，就能看到红色背景的块。

内联元素基石line-height

1. 高度之本
   行距的作用明确阅读方向，行距分散在当前文字的上方和下方。第一行文字的上方也是有行距的，但是只有当前行距的一半，称为半行距。
   行距 = line-height - font-size

2. line-height实现垂直居中
   实际上line-height可以实现近似垂直居中。因为文字的垂直中线位置普遍比真正的‘行框盒子’要低，行距分散在文字的上下方，所以能够实现近似垂直居中。

3. line-height的值
   line-height的默认值是normal，还支持数值/百分比/长度值。
   normal值是和font-family密切相关的。
   line-height最终的计算值都是和当前font-size相乘之后的结果。如果为2em，em表示就是当前font-size的值。
   三者有所不同的地方在于，子元素所继承的值。如果是百分比或者长度值，所继承的就是计算后的最终值；如果是数值，所继承的就是这个值。

vertical-align

1. 家族认识
   线类: baseline(默认值)/top/middle/bottom
   文本类: text-top/text-bottom
   上下标类: sub/super
   数值百分比类: 20px/2em/20%。如果设置为正数，则是当前基线位置向上移动，反之向下。

2. 作用的前提
   只能用于用于内联元素以及display为table-cell的元素。块级元素不能使用。

3. 与line-height的关系
   如果是百分比的话，就是相对于line-height计算的。

4. 留白问题
   任意一个块级元素，里面若有图片，则块级元素的高度会比图片的高度高。
   
   在之前写上一个X给他加上北京，你会发现整个X的行高是22px(浏览器默认字体是16px)，意味着半行距有3px。而图片的基线是自身的下边缘。默认两者的基线要对齐，所以产生了留白，也就是留出了半行距的高度。
   

解决方案

1. 图片块级化。块级化之后就不存在’空白节点’，‘line-height’，‘vertical-algin’
2. 容器line-height足够小。line-height足够小的时候，行距就足够短。
3. 容器font-size足够小
4. 图片设置其他的vertical-align属性值。因为默认是基线对齐，所以只要不使用默认的方式，就可以解决。