一.定義和用法
line-height 屬性設置行間的距離（行高）。
可能的值
- normal默認。設置合理的行間距。
- number設置數字，此數字會與當前的字體尺寸相乘來設置行間距。
- length設置固定的行間距。
- %基於當前字體尺寸的百分比行間距。
- inherit規定應該從父元素繼承 line-height 屬性的值。
注釋：不允許使用負值。
瀏覽器支持
所有瀏覽器都支持 line-height 屬性。
注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。
特殊說明
該屬性會影響行框的布局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
二.撐開高度的是line-height而不是內容
行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離。基線實在英文字母中用到的一個概念，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。
vertical-align中有top,middle,baseline,bottom與之是由關聯的，但是由於中文跟英文長得不一樣，所以基線的說法就像老太太穿線——對不上眼。您理解為底線之差也不為不可。只是定義一回事，表現則另一回事。
CSS中起高度作用的應該就是height以及line-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那么其最終表現的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。待我慢慢敘來。
先說一個大家都熟知的現象，有一個空的div，<div></div>，如果沒有設置至少大於1像素高度height值時，該div的高度就是個0。如果該div里面打入了一個空格或是文字，則此div就會有一個高度。那么您思考過沒有，為什么div里面有文字后就會有高度呢？
這是個看上去很簡單的問題，是理解line-height非常重要的一個問題。可能有人會跟認為是：文字撐開的！文字占據空間，自然將div撐開。我一開始也是這樣理解的，但是事實上，深入理解inline模型后，我發現，根本不是文字撐開了div的高度，而是line-height！要證明很簡單(如下測試代碼)：
CSS代碼：
- .test1{font-size:20px; line-height:0; border:1px solid #cccccc; background:#eeeeee;}
- .test2{font-size:0; line-height:20px; border:1px solid #cccccc; background:#eeeeee;}
HTML代碼：
- <div class="test1">測試</div>
- <div class="test2">測試</div>
結果是如此的顯而易見，test1 div有文字大小，但行高為0，結果div的高度就是個0；
test2 div文字大小為0，但是有行高，為20像素，結果div高度就是20像素。
這就說明撐開div高度的是line-height不是文字內容。
到底這個line-height行高怎么就產生了高度呢？
在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字。一行文字一個line boxes。
例如“艾佛森退役”這5個字，如果它們在一行顯示，你艾佛森再牛逼，對不起，只有一個line boxes罩着你；
但“春哥純爺們”這5個字，要是豎着寫，一行一個，那真是夠爺們，一個字罩着一個line boxes，於是總計五個line boxes。line boxes什么特性也沒有，就高度。
所以一個沒有設置height屬性的div的高度就是由一個一個line boxes的高度堆積而成的。
其實line boxes不是直接的生產者，屬於中層干部，真正的活兒都是它的手下 – inline boxes干的，這些手下就是文字啦，圖片啊，<span>之類的inline屬性的標簽啦。line boxes只是個考察匯報人員，考察它的手下誰的實際line-height值最高，誰最高，它就要誰的值，然后向上匯報，形成高度。
例如
- <span style="line-height:20px;">取手下line-height<span style="line-height:40px;">最高</span>的值</span>
則line boxes的高度就是40像素了。
三.利用行高實現垂直局中
行高還有一個特性，叫做垂直居中性。line-height的最終表現是通過line boxes實現的，而無論line boxes所占據的高度是多少（無論比文字大還是比文字小），其占據的空間都是與文字內容公用水平中垂線的。還拿上面這張圖來說吧。
看test1的結果，此時line boxes的高度為0，但是它是以文字的水平中垂線對稱分布的。這一重要的特性可以用來實現文字或圖片的垂直居中對齊。
1.單行文字的垂直居中對齊
把line-height設置為您需要的box的大小可以實現單行文字的垂直居中
2、多行文字的垂直居中
要實現高度不固定div的文字垂直居中使用padding就好了。
對於高度固定的div，里面文字單行或多行顯示，可以借助於line-height實現。
正如上面所說，line boxes的高度取決於它的下屬職員的最高高度。而這個高度由一個不占據任何空間的空格完成，方法即使設置font-size為0，line-height為所需要的高度。同時，我們為了分隔line boxes，同時要保持在一行上，需要設置display屬性值為inline-block。如下代碼，
CSS代碼：
- .mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px;}
- .mulit_line span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
- .mulit_line i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}
html代碼：
- <p class="mulit_line">
- <span style="font-size:12px;">這里是高度為150像素的標簽內的多行文字，文字大小為12像素。<br />這里是第二行，用來測試多行的顯示效果。</span><i> </i>
- </p>
已通過IE8以外的主流瀏覽器的兼容性檢測。
3、圖片的垂直居中
參考：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
四.行高在文章顯示中的應用
一般社交型的網站都會有發博文或寫日志的功能，其中發表后的文章顯示也是有學問的，其中之一就是line-height行高。
首先要知道行高的幾種表示方法：px/em，或normal，或百分值，或數值，或inherit繼承。
在顯示文章的box里，px的表示方法首先是要被淘汰的。因為文章里面的文字是有大有小的，使用px定值，由於繼承性，無法實現根據文字大小自動調整間距，會出現大號文字重疊的現象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。一般瀏覽器的normal值在1~1.2之間，使用normal必然文字間距過小，閱讀吃力。百分值也有繼承性，但是有個很搓的辦法可以實現文字間距自動適應於文字的大小，那就是使用*通配符，例如：
就不會出現文字重疊的情況了。網易博客就是使用的這個方法
為什么說這個方法搓呢，使用*通配符大大增加了CSS的渲染，效率低，而且有更好的方法，就是使用數值。150%雖然和1.5在值上是一樣的，但是它們也是有差別的，差別在於繼承性，使用百分比會計算line-height的值，然后以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了該標簽再計算去line-height的像素值。所以同樣的效果只需要下面CSS就可以實現了。
五.使用行高代替高度避免haslayout
在某些情形下，line-height可以和height互換，因為實現的效果一樣。都能撐開一個高度，然而這兩個CSS屬性有一個較隱蔽的差異，就是使用height會使標簽haslayout，而使用line-height則不會。以前只有IE6的時候曾流行使用height清除浮動，就是利用了IE下height使haslayout的屬性。但有時候，haslayout並不需要，反而要避免。
IE6，IE7下，類似inline-block屬性的元素里如果有block屬性的元素，如果該block haslayout，則該標簽會沖破外部inline-block的顯示而寬度100%顯示，從使按鈕自適應文字大小的效果失效，解決方法就是使用line-height代替height。
上圖中第一個標簽使用height定高，結果寬度直接100%顯示；第二個標簽使用line-height定高，結果很規矩，自適應與內部文字大小。其代碼如下：
CSS部分：
- .out{display:inline-block; background:#a0b3d6; margin-top:20px;}
- .in1{display:block; height:20px;}
- .in2{display:block; line-height:20px;}
HTML部分：
- <span class="out">
- <span class="in1">height:20px;</span>
- </span>
- <span class="out">
- <span class="in2">line-height:20px;</span>
- </span>
本文參考：http://www.zhangxinxu.com/wordpress/?p=384 作者：zhangxinxu