line-height是行高的意思，它決定了元素中文本內容的高度，height則是定義元素自身的高度。
- height：表示 行高
- line-height：表示 每行文字所占的高度
舉例：
第一種情況：使用height
結果：
第二種情況：行高為50px和文字高度為20px情況：
這時候文字會居中顯示（對於文字為什么會居中顯示問題解釋如下：我們把line-height設置為50px，也就是說這行文字會占50px,但是顯然每個字的大小只有20px，這時候瀏覽器把多出來的30px,在文字上面加了15px,
文字下面加了15px這個時候文字就在50px的空間上居中了）
結果：
第三種情況：設置了文字高度和文字大小一樣的此時滿屏顯示
結果：
“行高”顧名思意指一行文字的高度。具體來說是指兩行文字間基線之間的距離。
CSS中起高度作用的就是height以及line-height！如果一個標簽沒有定義height屬性(包括百分比高度)，那么其最終表現的高度一定是由line-height起作用
先說一個大家都熟知的現象，有一個空的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;} .test2{font-size:0; line-height:20px; border:1px solid #cccccc;}
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值最高，誰最高，它就要誰的值，然后向上匯報，形成高度。
網上都是這么說的，把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中。這句話確實是正確的，但其實也是有問題的。問題在於height，看我的表述：“把line-height設置為您需要的box的大小可以實現單行文字的垂直居中”，差別在於我把height去掉了，這個height是多余的，您不信您可以自己試試。