line-height

做网页的时候有一个疑问，那就是我去量有关于字体的时候该去量到哪里，大家都知道，文字是有默认行高的，我们量元素与字体之间的距离的时候不应该从贴着文字量，或者是贴着文字量出数值以后，应该减去相应地值，那么问题又来了，我到底应该减去多少才是合适准确的呢，于是我做了一个实验：

屏幕快照 2017-09-02 上午10.56.25.png

这是三个p标签，并且没有margin值，分别设置了font-size为12px 16px 20px；并且给不同的背景色
大家会发现，这三个标签中的文字的高度要小于背景色的高度，而且，这个高度会随着字体大小的变化而变化，而这种变化有没有什么规律可言呢，于是我个分别量了它们的高度，发现第一个的背景色的高度是17px 第二个是22px 第三个是28px,好像没什么规律可言；于是我又试了从字号12px到30px的line-height：

P70902-114543.jpg

发现没什么规律可言，而且line-height的值不仅随着字号的变化而变化，而且随着字体的变化而变化，所以，我们并找不到它们的规律。

我建议的方法是在写页面之初给line-height设置一个倍数：比如line-height：1.5；
这样就比较好计算了，line-height的倍数是基于字号的，也就是说，font-size：20px；line-height：1.5；那么最终的line-height的值是30px；