CSS line-height、font-size、height

x-height

在我们了解line-height之前，我们应该了解x-height。

小写字母的高度取决于小写字母x的高度，不包括上升或下降。

在西文字体排印学中，x字高指的是字母的基本高度，精确来说，就是**基线(baseline)与主线(mean line)**之间的距离。它指称一个字体中小写字母x的高度（x-height的的语源）。在现代字体设计领域里，x字高代表了一个字体的设计因素，在一些场合，字母x并不完全等于x字高。

a、c、e、m、n、o、r、s、u、v、w、z和 x的字高相同。

在西文中，除了以上这些字母以外，其他的小写字母都比x字高要大。这些字母分为两类，一种是含有降部的字母，一种是含有升部的字母。

降部字母笔画向下超过基线，比如字母y、g、q和p。

升部字母笔画含有向上的部分，比如l、k、b和d。

x字高和字母主字高的比例是考察一个字体设计的重要因素。

CSS line-height、font-size、height

用于对网页文字及其他元素设置行高，它会影响元素高度，因此也可用它调整一些元素的高度。

行高指的是文本行的基线间的距离（文字尺寸与行距之间的和）。文本之间的空白不仅受行高影响，同时也受字号影响。

line-height属性设置行间的距离（行高）。即两行文字基线之间的距离。

line-height是不允许用负值的。

行高是作用在每一个行框盒子(line-box)上的，而行框盒子是由内联盒子组成。所以行高直接决定了内联元素的高度。对于块级元素和替换元素，行高无法决定最终高度，只能决定行框盒子的最小高度。

至于什么是行框盒子，我们下次再详说。

值	描述
normal	默认。设置合理的行间距。会受font-family的影响。不同操作系统，不同浏览器所使用的字体不一样，所以最终line-height的具体值不一样。
number	设置数字。此数字会与当前的字体尺寸(font-size)相乘来设置行间距。
length	设置固定的行间距。长度用的最多的就是px与em。em跟数字一样是相对于font-size计算的。
%	基于当前字体尺寸的百分比间距。百分比相对于font-size计算。
inherit	规定应该从父元素继承line-height属性的值。

子元素继承的是父元素计算后的line-height值。

对于数字，父元素设置了多少，子元素就会继承多少。即你如果设置line-height值为2，那么子元素继承的值也为2。

对于em，如果line-height值为2em，line-size为10px，那么实际line-height的值为2em*10px=20px。子元素的line-height也为20px。

定义：文本行与行之间的距离。

计算方式：line-height - font-size

我们得到的行距会平均作用于文字的上下方。

CSS line-height、font-size、height

选中的字体就是font-size文字大小。行高减去字体大小得到的行高值是上半行距和下半行距的总和。从图中可以看到上半行距与下半行距的高是等值的。