行间距，即传说中控制两行文字垂直距离的东东。在CSS中，line-height被用来控制行与行之间垂直距离。
默认状态，浏览器使用1.0-1.2 line-height, 这是一个初始值。
下图可协助你了解个大概。
行内框盒子模型
所有内联元素的样式表现都与行内框盒子模型有关。所以这个概念是非常重要的。
<p>这是一段文字，这里有个<em>em</em> 标签。</p>
如上面一段普普通通的代码，却包含了4种盒子：
1）“内容区域”（content area），是一种围绕文字看不见的盒子,可理解为选中文字蓝色背景区域，如下图。“内容区域”的大小与 font-size 大小相关；
2）“内联盒子”（inline-boxes），“内联盒子”不会让内容成块显示，而是排成一行。如果文字外部含 inline 水平的标签（如span，a，em等），则属于“内联盒子”。如果是光秃秃的文字，则属于“匿名内联盒子”，，每个“行框盒子”又是由一个一个“内联盒子”组成，“行框盒子”；
4）<p> 标签所在的“包含盒子”（containing box），。此盒子由一行一行的“行框盒子”组成
line-height 的高度机理
疑问一：元素高度是从何而来的呢？是由里面的文字撑开的吗？
答案：不是的，并不是由文字撑开的，实际上是由 line-height 决定的。
这时可能会提出疑问：line-height明明是两基线距离，单行文字哪来的行高呢？
关于这个问题，我们需要了解的是：
1）行高由于其继承性，影响无处不在，即使单行文本也不例外。
2）行高只是幕后黑手，高度的表现不是行高，而是内容区域和行间距。
而 内容区域 + 行间距 = 行高，正好高度表现等于行高，给人感觉上是行高起了作用。
1. 内容区域高度只与字号以及字体有关，与 line-height 没有任何关系。
2. 在simsun（宋体）字体下，内容区域高度等于文字大小值。
因此，在 simsun（宋体）字体下：
font-size + 行间距 = line-height
那行间距的就可以这样计算了：
font-size: 240px; line-height: 360px; 则行间距 = 360px - 240px = 120px;
行间距上下拆分，就有了“半行间距”。
半行间距 = (行高 - 内容区域高度)/2
总结：
行高决定内联盒子高度，但高度表现是由行间距和内容区域表现的；行间距墙头草，可大可小（甚至负值），它的作用就是保证内联盒子高度正好等于行高。
疑问二：如果行框盒子里面有多个不同行高的内联盒子，这时高度会如何表现呢？是由行高最高的内联盒子决定的吗？
答案：不对。多行文本的高度就是单行文本高度累加。
疑问三：如果行框盒子里面混入inline-block水平元素（如图片），高度如何表现呢？
line-height 各类属性值
normal 默认属性值，不同浏览器表现不同，且与元素字体关联。
<number> 使用数值作为行高值，根据当前元素的font-size大小计算
<length> 使用具体长度值作为行高值
<percent> 使用百分比值作为行高值，相当于设置了该line-height属性的元素的font-size大小来计算
inherit 行高继承。如input框等元素默认行高是normal，使用inherit可以让文本样式可控性更强。
应用元素有差别：
line-height：1.5 所有可继承元素根据自己的 font-size 重新计算行高。推荐使用
line-height：150%/1.5em 当前元素根据font-size计算行高，直接继承给下面的元素。
body全局数值行高使用经验
body{ font-size: 14px; line-height: ? }
匹配20像素的使用经验——方便心算
line-height = 20px / 14px ≈ 1.4286
body{ font-size: 14px; line-height: 1.4286; }
line-height与图片表现
行高会不会影响图片实际占据的高度？
答案：不会。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> p{ background-color: #ccc; } span{ background-color: white; } </style> </head> <body> <section> <p> <img src="./123.jpg" /><span>xxxxxxx</span> </p> </section> </body> </html>
效果如下图，图片会与右边的文字基线对齐。