深入理解line-height

HTML和CSS因为其所见即所得的直观特性，往往被冠上简单易学的名号。我一开始也是这么想的，不就是那几个控制浮动、颜色、位置的标签吗！CSS3不就是加了些花哨的特效吗！
记得哪位大大说过，前端开发里CSS是最难的。初学者也许会对这句话嗤之以鼻，但随着我学习的深入，渐渐意识这句话还是有一定道理的。用三体里的一句话就是

方寸之间，深不见底啊

每一个简单的属性，都有你所不知的一面！今天就来说说这个line-height。我们在文章的排版中，经常用到line-height这个属性。然而，我们真的了解它吗？line-height又是由什么来决定的？
首先推荐一篇文章，深入了解css的行高Line Height属性
(假设你已经读完了这篇文章并且已经大致理解)

那么这张图应该能看懂了。这个两行的文字所包含的盒子，从里到外分别为：

• content area(绿色字体所在的白色背景区域，边框为绿色)

• inline-boxes(content area加上其上下的黄色区域(半行间距),边框也为绿色)

• line-boxes(包裹在inline-boxes外部的盒子，边框为红色)

• containing box(最外面的盒子，边框为蓝色)

其中line-boxes的高度取决于其包含的inline-boxes中最高的那一个，例如本图片中的斜体fish。

图中的黄色部分分布在content area的上下，这就是半行间距。譬如我们设置

p{font-size:16px;line-height:20px;}

那么黄色部分(半行间距)就是(20-16)/2=2px，上一行和下一行的半行间距叠加为4px，再加上字体本身的16px，那行距就自然是20px了(严格来说，行距是上下两行文字之间baseline的距离)

(未完)

参考资料
css行高line-height的一些深入理解及应用