一、 line-height的定義
在CSS中，line-height還有一個更加准確的定義：兩行文字基線之間的距離。
1、頂線、中線、基線、底線
基線？這是什么東西？聽都沒聽過！我們都用過英文簿，英文簿每一行都有4條線，這4條線分別是：（1）頂線；（2）中線；（3）基線；（4）底線。
在CSS中，每一行文字可以看成一個“行盒子”，而每一個行盒子都有4條線：（1）頂線；（2）中線；（3）基線；（4）底線。沒錯，這4條線跟英文簿中的4條線是一樣的道理。此外vertical-align屬性中的top、middle、baseline、bottom這4個屬性值分別對應的就是：頂線、中線、基線、底線。小伙伴們肯定情不自禁地驚嘆一聲：噢！原來是這樣一回事！
注意一下，基線並不是行盒子中最下面的線，而是倒數第2條線。由此我們很清楚地知道line-height究竟指的是什么。
2、行高、行距與半行距
（1）行高
行高（即line-height），指的是“兩行基線之間的垂直距離”，請看上圖。
有些小伙伴就會問了：為什么W3C要這樣去定義line-height呢？直接定義line-height為2條底線之間的距離豈不是更好理解么？規則這東西嘛，都是官方定義的，我們只需要去遵循就行了。這就跟我們過馬路一樣，沒必要糾結為什么是“綠燈走紅燈停”，而不是“紅燈走綠燈停”。
（2）行距
行距，指的是：上一行的底線到下一行的頂線的垂直距離。也就是兩行文字之間的空隙。
（3）半行距
半行距，很好理解，指的是行距的一半。
為什么要搞一個半行距出來呢？其實這就是為了引出在下面所提到的“行框（inline box）”。
3、內容區與行框
（1）內容區
內容區，指的是行盒子頂線到底線之間的垂直距離。
（2）行框
行框，指的是兩行文字“行半距分割線”之間的垂直距離。
二、深入line-height
1、height和line-height
line-height有默認值，當沒有定義line-height屬性時，瀏覽器就會采用默認的line-height值。
一行文字的高度是由line-height決定，而不是由height決定的。例如在p標簽中，一個p標簽的文字可以有很多行，其中line-height定義的是一行文字的高度，而height定義的是整個段落的高度（p標簽的高度）。
在CSS中，我們可以定義height和line-height這2個屬性值相等，從而來實現單行文字的垂直居中。這是經常使用到的一個技巧，希望大家記住。
舉例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
width:240px;
height:60px;
border:1px solid gray;
font-size:12px;
text-align:center;
}
#div1{line-height:20px;}
#div2{line-height:40px;}
#div3{line-height:60px;}
</style>
</head>
<body>
<div id="div1">height為50px，line-height為20px</div>
<div id="div2">height為50px，line-height為40px</div>
<div id="div3">height為50px，line-height為60px</div>
</body>
</html>
分析：
為什么定義height和line-height這2個屬性值相等，就可以實現單行文字的垂直居中呢？從上面這個例子，我們可以很直觀而感性地認知。
2、line-height取值為百分比值、em值
當line-height值為百分比值或者em值時，當前元素的行高是相對於“父元素”的font-size值來計算的。計算公式如下：
為什么定義height和line-height這2個屬性值相等，就可以實現單行文字的垂直居中呢？從上面這個例子，我們可以很直觀而感性地認知。
2、line-height取值為百分比值、em值
當line-height值為百分比值或者em值時，當前元素的行高是相對於“父元素”的font-size值來計算的。計算公式如下：
line-height = （父元素font-size）×（百分比）
line-height = （父元素font-size）×（em值）
舉例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body{font-size:30px;}
#outer-box
{
/*父元素行高：30px×150%=45px*/
line-height:150%;
background-color:Red;
color:White;
}
#inner-box
{
/*子元素行高：30px×150%=45px（繼承父元素的line-height）*/
font-size:20px;
background-color:Purple;
color:White;
}
</style>
</head>
<body>
<div id="outer-box">這是父元素
<div id="inner-box">這是子元素</div>
</div>
</body>
</html>
在上面這段代碼中，#outer-box的行高等於30px×1.5=45px。由於line-height具有繼承性，當line-height取值為百分比時，會直接繼承父元素的line-height（除非自己指定line-height）。