一张图搞懂 line-height 行间距 行内文本框之间的关系

如果对于 line-height，font-size，行间距，行内文本框之间的关系不是很清楚，不妨仔细看看下面这张图。



总结一下：
line-height：代表的是文本基线之间的距离，对应上图中红色框的高度
行间距：可由公式行间距 = line-height - font-size 计算
行内框：文本行中的每一个元素都会生成行内框，就是图中的棕色框框，除去文字内容外，棕色框框的顶部和底部也许会有高度，是否会有高度，取决于是否有行间距，行间距的一半就是棕色框框顶部或底部的高度。

---

看到这里，对于四者之间的关系你是否明白了呢？欢迎讨论交流，有错误之处还望及时指正！