css行高line-height的一些深入理解及應用
聲明：此文為轉載，點擊查看原文，原文發布日期為2009年，僅供大家參考，如有侵權24小時內刪除，聯系QQ：1522025433。
一、前言
前兩天在騰訊ISD團隊博客上看到一篇翻譯的文章“深入理解css 行高”，是個不錯的文章，學到了不少東西，建議您看看。
這裏，我也要講講我對line-height的一些理解，所講解的東西絕大多數與上面提到的“深入理解css 行高”是不重復的，可以說是補充或是另外一個角度的思考。另外，將結合實際，展示line-height的一些特性和一些常見應用，幫助您對css行高line-height的理解。所講述的並不一定都是正確的，歡迎指正歡迎交流。
二、一些字面意思
“行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離。基線實在英文字母中用到的一個概念，我們剛學英語的時使用的那個英語本子每行有四條線，其中底部第二條線就是基線，是a,c,z,x等字母的底邊線。下圖的紅色線即為基線。
vertical-align中有top,middle,baseline,bottom與之是由關聯的，但具體細節如何，瀏覽器差異怎樣，我還不是很清楚。
但是由於中文跟英文長得不一樣，所以基線的說法就像老太太穿線——對不上眼。您理解為底線之差也不為不可。只是定義一回事，表現則另一回事。
三、line-height與line boxes高度
css中起高度作用的應該就是height以及line-height了吧！如果一個標簽沒有定義height屬性(包括百分比高度)，那麽其最終表現的高度一定是由line-height起作用，即使是IE6下11像素左右默認高度bug也是如此。待我慢慢敘來。
先說一個大家都熟知的現象，有一個空的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
結果如下圖(windows IE6瀏覽器下)：
結果是如此的顯而易見，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，但是它是以文字的水平中垂線對稱分布的。這一重要的特性可以用來實現文字或圖片的垂直居中對齊。
五、在單行或多行或圖片垂直居中實現上的應用
您可以狠狠地點擊這裏：行高實現單行和多行文字垂直居中demo
demo預覽圖：
1、單行文字的垂直居中對齊
網上都是這麽說的，把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中。這句話確實是正確的，但其實也是有問題的。問題在於height，看我的表述：“把line-height設置為您需要的box的大小可以實現單行文字的垂直居中”，差別在於我把height去掉了，這個height是多余的，您不信您可以自己試試。
2、多行文字的垂直居中
要實現高度不固定的文字垂直居中使用padding就好了。對於高度固定的div，裏面文字單行或多行顯示，字體大小有大有小的情況怎麽辦呢？方法之一就是借助於line-height。
下圖為demo頁面的截圖批註圖：
正如上面所說，line boxes的高度取決於它的下屬職員的最高高度。而這個高度由一個不占據任何空間的空格完成，方法即使設置font-size為0，line-height為所需要的高度。同時，我們為了分隔line boxes，同時要保持在一行上，需要設置display屬性為inline-block。如下代碼，有別於demo：
css代碼：
.mulit_line{line-height:150px; border:1px dashed #cccccc; padding-left:5px; font-size:0;} .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;}
感謝小西的提醒，下為修復IE8問題後的代碼：
.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以外的主流瀏覽器的兼容性檢測。以前曾見過說IE8的line-height有些問題，如果誰發現IE8下有問題，歡迎指出，不甚感謝。
3、圖片的垂直居中
您可以狠狠地單擊這裏：行高使圖片垂直居中顯示demo
demo預覽圖：
此方法在“大小不固定的圖片、多行文字的水平垂直居中”一文中的最後補充內容裏已經詳細講解了。這裏不多說了。
//zxx:之前未能在IE8下測試，現發現此方法不僅在Opera下有問題，在IE8下也是表現欠佳。所以僅僅使用line-height的垂直居中法有待斟酌，或許要使用與上面多行文字垂直居中的同樣的方法來實現圖片垂直居中的效果。
六、行高在文章顯示中的應用
一般社交型的網站都會有發博文或寫日誌的功能，其中發表後的文章顯示也是有學問的，其中之一就是line-height行高。
首先要知道行高的幾種表示方法：px/em，或normal，或百分值，或數值，或inherit繼承。
在顯示文章的box裏，px的表示方法首先是要被淘汰的。因為文章裏面的文字是有大有小的，使用px定值，由於繼承性，無法實現根據文字大小自動調整間距，會出現大號文字重疊的現象。normal也是不行的，一般文章顯示最好是650像素的寬度，1.5倍的行距較好。一般瀏覽器的normal值在1~1.2之間，使用normal必然文字間距過小，閱讀吃力。百分值也有繼承性，但是有個很搓的辦法可以實現文字間距自動適應於文字的大小，那就是使用“*”通配符，例如：.article_box *{line-height:150%;}就不會出現文字重疊的情況了。網易博客就是使用的這個方法，下圖為證：
為什麽說這個方法搓呢，使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用數值。150%雖然和1.5在值上是一樣的，但是它們也是有差別的，差別在於繼承性，使用百分比會計算line-height的值，然後以px像素為單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了該標簽再計算去line-height的像素值。所以同樣的效果只需要 .article_box{line-height:1.5;} 就可以實現了。
七、使用行高代替高度避免haslayout。（2017.10.7 測試並未出現圖中效果ie11下）
在某些情形下，line-height可以和height互換，因為實現的效果一樣。都能撐開一個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使用height會使標簽haslayout，而使用line-height則不會。以前只有IE6的時候曾流行使用height清除浮動，就是利用了IE下height使haslayout的屬性。但有時候，haslayout並不需要，反而要避免。
讀過我前面有關自適應按鈕文章的人可能會發現我使用了line-height代替了height，其原因在於：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>
八、結語
很多關於line-height的基礎的知識這裏並沒有詳細講述，本文一開始提到的騰訊ISD團隊的那篇關於行高的文章是不錯的，對於了解line-height的一些特性及inline box模型很有幫助。本文更多的是講述自己對於line-height的一些理解，簡述了我使用line-height的一些經驗。由於都是個人的些東西，加上本身自己的資歷有限，所以可能會出現一些錯誤，一些遺漏之處等，還望了解。歡迎指正。要是能對您的學習有所幫助就再好不過了。
css行高line-height的一些深入理解及應用