1、line-height定義
line-height表示行高，即兩行文字基線間的距離。
以下是圖示說明：
行高是2條紅線之間的距離，即：1+2+3+4
在實際測量中，基線不好找，可測量頂線到頂線的距離來代替行高。
2、行間距
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。
示例代碼：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>line-height行高測量</title> <style type="text/css"> * { padding: 0; margin: 0; font-size: 14px; } .p { width: 200px; margin: 100px; line-height: 100px; border: 1px solid green; } </style> </head> <body> <div class="p"> 中文abc12345 </div> </body> </html>
效果：
3、line-height取值
/*瀏覽器默認*/ line-height: normal; /*設置數字，此數字會與當前的字體尺寸相乘來設置行間距*/ line-height:100px; /*設置固定的行間距*/ line-height: 1.8; /*基於當前字體尺寸的百分比行間距。*/ line-height: 180%;
說明：line-height可以繼承，但是后代元素會繼承這個縮放因子而不是計算值。
4、inline box
inline元素所產生的inline box，就是容器中每個行級元素都會產生一個inline box，而多個行級元素排成一行就會有多個inline box，即inline boxes。
<p> <span>行級元素1</span><span>行級元素2</span><em>行級元素3</em>行級元素4 </p>
以上HTML有4個inline box，解釋如下：
- p元素是一個容器，包裹了整個行級元素
- 不帶標簽的文字也是一個隱藏的行級元素
所有行級元素（行級元素1、行級元素2、行級元素3和行級元素4）具有四個inline box，而每一行都會有一個line box，其實就是每一行所有inline boxes，inline boxes高度取的是最高的inline box的高度。
即：每一行中，文字和圖片都是inline box，它們共同組成了一個line box，line box的高度取決於inline box中最高的元素。
5、圖片不受line-height影響
本示例圖片尺寸為150*150px。
示例代碼：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>line-height行高屬性</title> <style type="text/css"> * { padding: 0; margin: 0; font-size: 14px; } .p { margin: 100px; border: 1px solid red; line-height: 1.8; } </style> </head> <body> <div class="p"> <img src="dist/img/1_jslang.jpg" alt="尺寸為：150*150" /><span>az123</span> </div> </body> </html>
效果：
說明：上圖的圖片和文字下有一個間距，因為img的對齊方式默認為為基線對齊！
將img的基線對齊改為底部對齊可去除下面的空白
img{ vertical-align: bottom; }
效果：
此時line-height應該設置為圖片的高度，即150px。
文字和圖片垂直居中的示例代碼為：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>line-height行高屬性</title> <style type="text/css"> * { padding: 0; margin: 0; font-size: 14px; } .p { margin: 100px; border: 1px solid red; /*設置為圖片的高度了*/ line-height: 150px; } img { /*圖片對齊方式改為底部對齊*/ vertical-align: bottom; } </style> </head> <body> <div class="p"> <img src="dist/img/1_jslang.jpg" alt="尺寸為：150*150" /><span>az123</span> </div> </body> </html>
效果：
6、塊級元素的高度和字體大小沒有關系，是由行高決定。
示例代碼：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>line-height</title> <style type="text/css"> * { padding: 0; margin: 0; } .test1 { line-height: 14px; font-size: 50px; background-color: #f00; } .test2 { line-height: 50px; font-size: 14px; background-color: #ccc; } </style> </head> <body> <br /> <br /> <p class="test1"> 我的行高是14px，字體大小是50px； </p> <br /> <br /> <p class="test2"> 我的行高是50px，字體大小是14px； </p> </body> </html>
效果：
7、 行級元素元素的高度由字體大小決定，與行高無關。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>line-height</title> <style type="text/css"> * { padding: 0; margin: 0; } .test1 { line-height: 14px; font-size: 50px; background-color: #f00; } .test2 { line-height: 50px; font-size: 14px; background-color: #ccc; } </style> </head> <body> <br /> <br /> <br /> <p> <span class="test1">我的行高是14px，字體大小是50px；</span> </p> <br /> <br /> <p> <span class="test2"> 我的行高是50px，字體大小是14px；</span> </p> </body> </html>
效果：
