行高 line-height 是 css 中的一个属性，通常可以用来控制段落间每一行文字的间距，或者用来对文字进行垂直居中，或者用来设置元素的高度。
行高的意义其实不限于此，还有一些细节的地方需要我们去挖掘，本文就是我在学习 css 行高属性的一些总结。
行高的取值
行高可以有以下几种取值方式：
-
normal默认值，由浏览器计算得出，一般位于1.0~1.2之间 -
inherit从父级继承 - 百分比值（如
150%） - 具体长度值（如
2em） - 数字（如
1.5）
行高可以和字号、字体合并进行简写，使用 css 中的 font属性：
font:<字号>/<行高> <字体>
不同取值对元素的影响
为了研究不同的取值对元素的影响，我们将行高设置到 body 上，子元素进行继承，查看不同的取值对于行高的元素有什么影响。
HTML 代码如下：
<body>
<div>
<p class="top">我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀</p>
<p class="middle">我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀</p>
<p class="bottom">我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀，我是一段文字呀</p>
</div>
</body>
初始 CSS 代码：
div{
width: 400px;
margin: 0 auto;
}
p{
border: 1px dashed #ccc;
}
.top{
font-size: 32px;
}
.middle{
font-size: 16px;
}
.bottom{
font-size: 12px;
}
我们为三个段落应用不同的字号，可以研究行高和字号的关系。
接下来为 body 设置 line-height 值。
使用默认值
对 body 的 line-height 应用默认值（或 normal）时，呈现默认状态：
使用默认行高.png
使用默认值，视觉效果较为舒适。
使用百分比值
body{
line-height: 150%;
}
运行效果：
使用百分比值.png
可见，上方大字体的段落挤成一团，下方小字体的段落又比较松散，使用百分比时，行高不会随字号的大小做相应的缩放。
最终计算出的行高为：
14px(body 默认字体大小) * 1.5 = 21px
对三个段落都会应用固定的 21px 的行高，而第一个段落中字体的大小为 32px 要大于行高，于是出现了重叠。（这块内容后边还会讲到，可暂时忽略）
使用具体的长度值
现在，我们对 body 的行高运用具体的长度值，看看有什么效果：
body{
line-height: 20px;
}
效果如图：
使用具体长度值.png
第一个段落的文字挨得更紧了，原因和上面的例子一样：三个段落运用了相同的行高，而采用具体的长度值作为行高时，行高并不会根据字号的大小做相应的缩放。
上面的例子和当前这个例子的结果都差不多，都是为三个段落应用的相同的固定的行高，区别只在于上面的例子多了一个计算的转换过程。这里我们可以得出一个小结论了：
使用百分比或者固定值定义的行高，其值是固定的，不会随字号进行缩放。
使用数字作为行高
现在，使用一个数字值作为body的行高：
body{
line-height: 1.5;
}
效果如图：
使用数字值作为行高.png
可见行高是会随着字号进行缩放的。回忆一下第一个例子，我们把
body 的行高设置为 normal（默认值）时，这些元素的行高也是会根据字号进行缩放的。于是我们可以在得出一个结论：使用数字值或者
normal（默认值）设置行高，行高会根据字号的大小进行缩放。通过上边的几个例子，我们已经基本掌握了行高的几种设置方式的区别了。接下来，我们来看一下和行高相关的几个概念。
和行高相关的几个 box
一段文本是由什么构成的呢？你会说是由字母（单个汉字）构成了单词，单词构成了段落的一行，然后多个行构成了一个段落。这就是我们要讲的几个 box 的基础。
inline-box
<p class="top">我是一段<em>文字</em>呀，我是一段文字呀，我是一段文字呀</p>
每个单词（或者段落中的行内元素）就是一个 inline-box，更严格点来讲，没有标签包裹的纯文本元素也被成为匿名 inline-box。顾名思义，inline-box 是内联元素，其让段落中的内联元素一个挨着一个水平排列，而不是想块级元素的那样垂直排列。
inline-box.png
上边每个用红框框起来的部分就是一个 inline-box。
line-box
一个 line-box 由一个或者多个 inline-box 构成，如上面的段落可以分为两个 line-box：
line-box.png
可以这么理解：段落中的每一行就是一个 line-box
containing-box
一个或多个 line-box 构成了一个 containing-box，每段文本都有一个 containing-box：
containing-box.png
可以这么理解：一个段落就是一个 containing-box。
你看，几个 box 是不是很简单呢？
几个 box 之间的关系
每个 containing-box 是由一个或多个 line-box 构成的，因此我们可以说 line-box 的总高度决定了 containing-box 的高度，而每个 line-box 是由一个或多个 inline-box 构成的，每个 line-box 的高度是由构成 line-box 的几个 inline-box 中的高度最大的那一个构成的，因此我们可以说：
inline-box 决定了一个段落也就是 containing-box 的高度。
那么 inline-box 的高度是由什么决定的呢？答曰：行高。
字号会影响段落的高度吗？
通过上边的学习我们已经了解了段落中的几个 box，其中对段落的高度起决定作用的就是段落中的 inline-box，同时我们需要知道的是：我们所设置的line-height的高度实际上是设置的 inline-box 的高度。或许你还有其他的疑问，譬如：既然你说段落的高度使用 inline-box（line-height）决定的，那为什么将字号增大，段落的高度还会发生变化呢？
其实这个问题我们在一开始就已经解决了：当我们给段落应用固定的行高时，其并不会随着字号进行适应，而是挤成一团，所以字号和段落本身的高度是没有什么关系的，只是我们在采用默认行高时，浏览器根据字号对行高进行了一些缩放。
我感觉上面的代码没有什么说服力，自己都看不太懂，于是采用实例来进行说明：
HTML 代码：
<div>
<p class="top">我是一段<em>文字</em>呀，我是一段文字呀，我是一段文字呀</p>
<p class="bottom">我是一段<em>文字</em>呀，我是一段文字呀，我是一段文字呀</p>
</div>
css 代码：
body{
line-height: 150%;
}
div{
width: 400px;
margin: 0 auto;
}
p{
border: 1px dashed #ccc;
font-size: 32px;
}
.top{
font-size: 0;
}
.bottom{
line-height: 0;
}
本例中，我们将一个段落的字体设置为0，将另一个段落的行高设置为0，看下到底哪一个因素影响段落的高度。运行效果如图：
行高和字号对于高度的影响.png
这个例子已经充分证明了，段落的高度并不是由字号决定的，而与行高有关在，字号并不能影响段落的高度。（这里讲的段落是显式设置
height 或者内边距、定位等属性的元素）
inline-box 和字号的关系
我们知道 line-height 可以设置为两种值：一种是大于字号（font-size）的值，另一种是小于字号（font-size）的值，这两种值和元素的表现有什么关系呢？要理清这个问题，需要再了解几个概念。
content box
content-box 就是 inline-box 中文本所占的空间，其高度就是文本本身的高度，不包括文本自身高度以外的空白：
content-box.png
上面的红框部分就是 content-box，content-box 的高度使用文本的 font-size 决定的。
半行间距
我们看到 content-box 的上下还有一些空白区域，这些区域就是所谓的半行间距，其值的计算方式为：
（行高 - 字号）/ 2
其中，行高和字号的差也叫作行间距。
半行间距.png
上图中 content-box 上下的灰色区域就是半行间距。这个半行间距，决定了 line-box 之间的距离。
行高小于字号的情况
上面的情况属于行高大于/等于字号的情况，如果行高小于字号，该如何表现呢？当行高小于字号时，计算出的半行间距为负值，于是其会向陷，就像这样：
半行间距为负值.png
上面我们说到，半行间距影响了 line-box 之间的距离，因此当半行间距大于0 时，随着其的逐渐增大，line-box 之间的距离也逐渐增大，视觉效果上段落结果愈松散。当半行间距小于 0 时，随着其的逐渐减小，line-box 之间的距离也逐渐减小，视觉效果上越来越紧凑。这就解释了我们最开始的例子中，将行高设置为百分比或者具体宽度的值时，上方段落的相邻行文字挨在一起的情况。我们可以计算一下应用这个固定行高时该段落的半行间距：
半行间距 = (14px * 1.5 - 32px) / 2 = -5.5
半行间距是负值，所以它们挨在一起了。而当我们采用数字或者默认值作为行高时，其值会根据字号进行相应的缩放，自然也不会挤在一起了。
总结
本文较详细的总结了 CSS 中的行高（line-height）属性，具体分了两个方面：
-
line-height的几种取值方式以及他们区别和对元素外观上的影响 - 几个相关的 box 介绍和他们之间的关系
不得不说，写文章真是一个费力的事情，学习这块知识用了半小时，而写这么一篇短文章花了将近三个小时不过若是此文对你有帮助，那也是极好的
附：相关链接资料
1.行高的深入理解和应用
2.深入理解css 行高
完。
网友评论