一、line-height的定义
line-height，行高，是指文本行基线间的垂直距离。
1. 什么是基线？
一般而言，一个文本行一共有四条线，从上到下依次为顶线、中线、基线、底线；在英文中，基线为小写 x 字母下边缘所在的那条线。如图：
注意，基线的位置与字体有关，不同的字体基线的位置有偏差。
2. 既然行高是指基线间的垂直距离，那么单行文本有没有行高？
当然是有的！
3. 行高控制行间距。
在多行文本中，第一行文本根据文本的字体和字号显示，并因此确定了第一行的基线；在此基础上，根据line-height的值，确定第二行基线的所在位置，在那个位置之上显示第二行文本。
在这个机制之下，可以推断出line-height控制行间距，行间距是文本行之间超出字体大小的额外空间。换句话说，line-height与font-size之差就是行间距；如果line-height的值小于font-size，也就是说行间距为负，就会导致后一行文本与前一行文本重叠。
二、行内框与行框
1.内容区：顶线与底线包围的区域，其高度与font-size相关（甚至可以粗略地等于）。
2.行内框：
每个行内元素都会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（比如line-height），行内框等于内容区。
设定line-height之后，将半行距【（行高-字体大小）/2】分别增加或者减少到内容区的上下两边，得到一个行内框。
3.行框：一旦给定的某一行已经生成了所有的行内框，行框的构造就会考虑这些行内框，使行框的高度足以包含最高行内框的顶端和最低行内框的底端。
请看如下代码：
1 <style> 2 p { 3 font-size: 32px; 4 border: 1px solid red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>What kind of color this para will be?</p>10 </body>为了页面效果比较明显，所以将font-size设置为32px；如下图：
这是line-height为默认值normal的页面效果。
如果我们改变line-height的值，比如将line-height的值设为0，其页面效果为：
border为什么会变成这样？
这是因为，font-size为32px，内容区的高度也就是32px；而line-height为0，那么半行距就是-16px；将-16px分别加到内容区的上下部分，刚好抵消了所有内容区的高度，从而行内框的高度变成0；这一行中只有这一个行内框，行框的高度也相应为0，于是就有了这样的一个边框。
原标题：CSS line
关键词：CSS
我知道了 