页面重构的问题：如何解释 line-height

Question

如题，求给一个合理解释，我已智商不够用了。

Answer 1

我觉得line-height就是一个类似行间距的属性，不影响文字的大小，但是会影响到文字的排列。对于外界来说，含有文字的元素（比如p，div之类的）的高度就是(文字的行数 - 1) * line-height的值（应该是这样，我是实验发现的）。

关于单位，楼上已经讲得很清楚了，默认是em（比如，font-size=24px时，1em=24px，1.5em=36px，2em=48px，以此类推），当然也可以设置成px、cm一类的绝对单位。

---

Edit
改正一下，line-height不是行间距，而是行高，即一行文字所占的高度，文字元素的高度应该为文字的行数 * line-height。

其实(我认为)元素的高度和font-size是无关的，它和line-height有关。由于line-height默认值是1em，所以文字大小越大，元素高度越大。但是设置了line-height之后，元素的高度就和文字大小无关了，只和设置的line-height和文字的行数有关。

Answer 2

line-height就是设置行高啦，如果有绝对单位(px,cm等)，则其值为设置的的，如果单位为相对单位(em)等，则其值相对于其本身的 font-size设置，如果没有单位也相当于 (em)；

对于 行高，这里又涉及到 行框，还有块元素啦，行内元素啦等的显示问题，还有 基线等~这玩意儿说不清了~，去看一下《css权威指南》里面讲解得比较清晰~

Answer 3

举个形象点的例子，还记得以前的语文写字本吗，每一行的高度可以理解成行高。

---

行高会影响到盒子的布局高度。当元素是内联元素或者块级元素的时候，且没有指定height属性的情况下，行高*行数就是盒子的高度；如果指定了height元素，盒子的高度就是指定的height属性值。

Answer 4

http://www.w3.org/TR/CSS2/visudet.html#strut

On a block container element whose content is composed of inline-level
elements, 'line-height' specifies the minimal height of line boxes
within the element. The minimum height consists of a minimum height
above the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the element's font
and line height properties. We call that imaginary box a "strut." (The
name is inspired by TeX.).

The height and depth of the font above and below the baseline are
assumed to be metrics that are contained in the font. (For more
details, see CSS level 3.)

簡而言之，line-height 就是 inline formatting context 當中的 line box 的最小高度。

然而，僅從 line-height 並不能確定文字基線在 line box 中的相對位置，這一位置還和字體相關。所以在混用字體的多行文本中，可能會出現 baseline 間距離不等於 line-height 的情況。這會導致 vertical rhythm 被破壞。