是不是感覺line-height會用，但是用起來總是怪怪的？那是因為你對它理解的還不夠！

* 什么是 line-height

??line-height【行高】顧名思意指一行文字的高度，用來指定行間的距離，具體來說是指兩行文字間基線之間的最小距離。關于基線【base-line】，如下圖：

* 支持性

所有瀏覽器都支持line-height，但ie不支持 line-height 的 inherit 值
?

* 注意點

line-height 不允許設置負值
?

* 說明

??line-height 與 font-size 的計算值之差（在 CSS 中就是兩行的“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
??原始數字值指定了一個縮放因子，后代元素會繼承這個縮放因子而不是計算值。即，當子元素節點設置line-heihgt：inherit的時候，繼承的是父元素節點的縮放因子。
?

* javascript語法

object.style.lineHeight = "2"

?

* 取值

?

* 深入理解 line-height

?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！

?那么，line-height 是如何產生高度的呢？

?在inline box模型中，有個line boxes，這玩意是看不見的，這個玩意的工作就是包裹每行文字；一行文字一個line boxes，無論是不同的<div>，<p>還是 <span>；還是單行內容過多自動換行，每一行，都有一個 line-boxes 包裹；line-boxes只有一個特性，就是高度。
? 所以現在明白為什么沒有設置height屬性的div也有高度了吧？沒錯，就是由一個個line-boxes堆積起來的。我們看下例子幫助理解：

html代碼

<div class="box">
  Hello world!
</div>
<br/>
<div class="box">
</div>

css代碼

* { marign:0; padding: 0; background-color: #4e4e4e; }
.box {
  background-color: pink;
  border: solid 1px white;
}

結果展示

?可以看到，同樣沒有設置height，第一個 div 的高度被文字撐開了，第二個div高度為0。這就因為文案 “Hello World!”由一個 line-boxes 包裹，line-boxes的默認高度為字體高度的110%；所以有了以上現象。需要理解的是，line-boxes是根據文案、圖片等這些資源生成的一個高度框，自身不產生高度。

既然如此，我們可以得出一個結論: line-height可以規定高度，有些時候，他也可以取代height

?

* 拓展與使用

單行文本的居中

?從上面的經驗我們可以知道，對于單行的文本有 line-boxes 這東西。網絡上常說，“把line-height設置與height相同的值，便可以實現單行文字的居中“。是沒有錯，但是其實略有冗余。line-height本身就能規定高度，其實只需要“把line-height設置成所需要的box的高度” 即可。

多行文本的居中對齊

1. 對于高度不固定的多行文本：
使用padding實現效果，只要把上下padding的值設為相同。

2. 對于高度固定的多行文本：
文字可能為單行，也可能為多行，再又或者字體大小不一致，這時我們就可以借助 line-height 實現居中效果。方案如下
注意：文案較多發生自動換行，或者不同屏幕適配時文字顯示行數不一致下，將不適用
html代碼

<p class="mulit_line">
    <span style="font-size:12px;">這里是高度為150像素的標簽內的多行文字，文字大小為12像素。<br/>這里是第二行，用來測試多行的顯示效果。</span>
  <i>&nbsp;</i>
</p>

css 代碼

* { margin: 0; padding: 0;}
.mulit_line{
  line-height: 150px; 
  padding: 15px;
  margin-left: 50%;     /* 讓盒子左右居中  */
  transform: translateX(-50%);
}
.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;
}

效果展示

?

避免haslayout：巧妙的設置文字的背景顏色

?經常我們有這樣的需求: 在一個文案中，需要對某些文字加背景顯示，或者，我們有一個tag，用作標注信息。情形如下：

Tag 標簽

可以這么實現
html代碼

<span class="box">NEWS!</span>

css代碼

.box {
  line-height: 20px;
  background-color: pink;
  padding: 5px;
  color: white;
  border-radius: 6px;
}

說明： 在某些情形下，line-height可以和height互換，因為實現的效果一樣。都能撐開一個高度，然而這兩個css屬性有一個較隱蔽的差異，就是使用height會使標簽haslayout，而使用line-height則不會。

沖破限制

關于line-height先說這些，如果有錯誤，歡迎指正。
如果覺得還不夠深入，可以查看 騰訊團隊的 深入理解line-height