今天在查一个问题，偶然发现bootstrap的行高是一个非常奇葩的小数，1.42857143。
很奇怪，于是乎去stackoverflow找了一下，发现这个数字是由 20 / 14的得到的，20px是bootstrap希望得到的line-height，而14px则是bootstrap默认的font-size，于是乎另外一个疑问出现了，为什么不直接写20px呢？
翻到一篇老文章，强调了一下为什么，在大部分情况下，应该使用无单位的line-height。
以下是一些简翻：
我想分享一些对于CSS：The Definitive Guide或这我的其他一些书的读者来说，是老生常谈的一点知识，不过仍然有需要写出来让更多人知晓。
CSS属性 line-height 可以接受没有单位的数值，你当然也可以给有单位的数值，尽管大部分情况下不应该这么做。
那么区别在哪里呢？当你定义一个有单位的数值，比如1em，你将会将一个计算后的值传递下去给所有的子节点，用如下的代码举例：
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px;}
small {font-size: 80%;}
<ul>
<li>I'm a list item with <small>small text</small>.</li>
</ul>
ul元素的line-height属性被计算成了15px，因为em单位是用元素自己的font-size属性来计算的，在此我先直接声明了font-size属性，可以得出计算后的结果。
然后这个计算后的数值被传递给了他的子节点，所以li和small的font-size都将会是15px，而不是根据他们自己的font-size来计算，实际上，页面就如同我如此设定了css属性一样来渲染：
ul {font-size: 15px; line-height: 1em;}
li {font-size: 10px; line-height: 15px;}
small {font-size: 80%; line-height: 15px;}
如果我拿走line-height属性上的em，那么被传递下去的值就不再是被计算后的值了，而是原始的数字1，虽然在当前元素上的计算他仍然类似于em，是一个对于font-size的乘法因子。
因此每一个元素都会使用自己的font-size来进行计算，得到自己的line-height值，最后的结果就如同我如此设定css属性：
ul {font-size: 15px; line-height: 1;}
li {font-size: 10px; line-height: 10px;}
small {font-size: 80%; line-height: 8px;}
这之间有很大的区别，这也是为什么总是强烈推荐使用没有单位的数字，如果你想去设置一些line-height在html或者body元素，或一些有很多子结点的元素上。
再次强调，line-height属性可以接受无单位的数值，这在大部分情况下都是比有单位的数值更好的选择。（完）
