line-height是兩條基線之間的距離,由lineheight撐開的,而不是文字,還有就是有一個居中的作用; height div的高度是由一個個line boxes的高度堆積而成的.
1. 單行文字的垂直
一般設置line-height就好了
2. 多行文字的垂直
這個比較複雜,應用場景,高度固定,裏面單行或者多行,且大小不一,方法之一是藉助line-height
正如上面所說，line boxes的高度取決於它的下屬職員的最高高度。而這個高度由一個不佔據任何空間的空格完成，方法即使設置font-size爲0，line-height爲所需要的高度。同時，我們爲了分隔line
boxes，同時要保持在一行上，需要設置display屬性爲inline-block。如下代碼，有別於demo：
代碼如下:
感謝小西的提醒，下爲修復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>
3. 行高在文件顯示中的作用
行高以1.5倍字體爲最佳,這裏固定值就不好用了,這裏主要區別150%和1.5
使用“*”通配符大大增加了css的渲染，效率低，而且有更好的方法，就是使用數值。150%雖然和1.5在值上是一樣的，但是它們也是有差別的，差別在於繼承性，使用百分比會計算line-height的值，然後以px像素爲單位繼承下去，而1.5則是先繼承1.5這個值，遍歷到了該標籤再計算去line-height的像素值。所以同樣的效果只需要.article_box{line-height:1.5;}就可以實現了。
4. 使用行高代替高度避免haslaylout
在某些情形下，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。