图片来自Google.png
在今天谈到样式表，会先想到styled-components、CSS-Modules等等这些最新的技术，很少有人会提到CSS如何如何。张鑫旭是前端大神里研究CSS的代表人物，可是他在博客却表示也只是掌握到皮毛，虽然知道这是谦虚，但也确实说明了掌握CSS和掌握好CSS差距还是相当大的。
line-height的定义
定义： 两行文字基线之间的距离
baseline就是基线.png
line-height的各种取值
normal
取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。
<number>
该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。
<length>
用于计算 line box 的高度。
<percentage>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
一行文字的高度
先看一个例子：
<style>
.txt {
font-size: 14px;
border: 1px solid #ccc;
}
</style>
<body>
<p>测试一行文字</p>
</body>
测试效果图.png
可以看到，在未给p.txt设置高度的情况下，它的最终在浏览器的渲染效果是，高度为22px。起初我很简单的认为，p.txt即使没有设置高度，但是它有文本节点，高度自然而然是被文字给撑了起来。
其实并不然，最终的结论是，p.txt在未设置高度的情况下，高度是给line-height撑了起来。这里再来做一个测试。
<style>
.txt1 {
font-size: 0;
line-height: 50px;
border: 1px solid #ccc;
margin-bottom: 50px;
}
.txt2 {
font-size: 16px;
line-height: 0;
border: 1px solid #ccc;
}
</style>
<body>
<p class="txt1">我是一行文字</p>
<p class="txt2">我是一行文字</p>
</body>
给p.txt1设置0像素的字体大小，再设置50像素的行高。再给p.txt2设置16像素的字体，大小为0的行高，看他们在Chrome浏览器最终的表现情况：
测试行高是否真的是行高在起作用.png
可以看到p.txt1虽然字体大小为0，但是却占据52个像素（行高+边框）的高度，而设置16像素字体大小的p.txt2却没能被字体撑开。这说明了，未设置高度的且包含文本节点的元素的高度，是受line-height影响的。
半行间距
半行间距就是黄色部分 =（360-240) / 2 = 60.png
在设计稿中的间距无非是，图片与图片之间、文字与图片之间、文字与文字之间和盒子与盒子之间。半行间距的概念对于还原设计稿是十分重要的，很多时候设计稿没有接近于百分百还原，很可能就是因为在量取文字与其他元素的之间的间距出了问题。在量取文字与其他元素的之间的距离时，切不可忘记了半行间距，否则很有可能被设计师提意见。
扩展阅读
css行高line-height的一些深入理解及应用
line-height | CSS-Tricks
规范之路 -line-height 的工作原理
网友评论