什么是line-height（行高）？line-height設置1.5和150%有什么區別？這是一個比較常見的css面試題，帶着這個問題往下看。所謂行高是指一段文字中某一行的高度嗎？具體來說不是。w3school是這樣定義的：
line-height 屬性設置行間的距離（行高），該屬性會影響行框的布局，在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
何為基線？基線不是漢字的底端，從英文字母來看，字母a、b、c的底端就是基線所在位置，文字默認垂直對齊方式就是基線與基線對齊（baseline），下面圖中的藍色線就是基線。
那么基線與基線之間的高度就稱為行高line-height。注意：塊級元素才有行高。
line-height有5個可能的值，分別是normal、number、length、%、inherit。一一介紹：
- normal，默認值，不同的瀏覽器值不同，大概是元素font-size的1.1-1.2倍的范圍；
- number 一個數字，該數字被稱為縮放因子，縮放因子與元素font-size相乘得到行高；
- length 具體的行高就是length；
- % 百分比，乘以元素的font-size得到行高；
- inherit 繼承父級的行高；
如果文字不夠直觀，不如看看下面的demo：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>line-height</title> <style type="text/css"> p{font-size: 20px; width:200px;} p.c1{line-height: normal} /*line-height: 24px chrome下。line-height為font-size的1.2倍*/ p.c2{line-height: 1.5;} /*line-height = 20*1.5 = 30px*/ p.c3{line-height: 30px;} /*line-height: 30px*/ p.c4{line-height: 150%;} /*line-height = 20*150% = 30px*/ </style> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script> </head> <body> <p class="c1">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> <p class="c2">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> <p class="c3">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> <p class="c4">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> <script type="text/javascript"> $("p").each(function(){ console.info( $(this).css("line-height") ) }) </script> </body> </html>
你會發現，當line-height設置成1.5和150%的效果是一樣的。那么行高設置為一個縮放因子和一個百分比的區別在哪里？區別就在於繼承上，當元素A的行高設置為縮放因子時，A元素的子元素B會繼承這個縮放因子並將縮放因子乘以B的font-size得到B元素的行高；當元素A的行高設置為百分比時，元素A的子元素B的行高直接繼承A元素計算后的行高。
例如有兩個元素A、B，元素B是元素A的子元素：
父元素A設置行高為縮放因子時
元素A font-size:14px; line-height:1.5; 計算后行高為14*1.5 = 21px；
元素B font-size:28px; line-height:1.5 (繼承來的)； 計算后行高為28*1.5 = 42px；
父元素A設置行高為百分比時
元素A font-size:14px; line-height:150%; 計算后行高為14*150% = 21px；
元素B font-size:28px; 直接繼承父元素A的行高計算值21px，此時B的行高比font-size還小，就會導致B元素內的文字上下重疊，代碼如下
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <title>line-height</title> <style type="text/css"> .c1{font-size: 14px; line-height: 1.5; width: 200px;} .c2{font-size: 28px;} .c3{font-size: 14px; line-height: 150%; width: 200px;} .c4{font-size: 28px;} </style> </head> <body> <div class="c1">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。 <p class="c2">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> </div> <div class="c3">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。 <p class="c4">line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。</p> </div> </body> </html>
因此，為了避免這種情況發生，建議將行高設置縮放因子，避免使用百分比或具體值。
本文地址http://www.cnblogs.com/wangmeijian/p/4222908.html by 王美建