行高(line-height)總結

前言：

   一、行元素設置 width、height、 padding-top、 padding-bottom、margin-top、margin-bottom 無效。 即 不會影響行高。

 padding-top、 padding-bottom會致使行元素內容區變大。

   二、inline-block :對象呈現爲行對象顯示，行內容呈現爲塊對象顯示。

概念

    行高爲相鄰兩行的基線間的距離。

 

要點

 一、元素設置了行高（ 不管是塊元素仍是行元素），將影響塊元素內有換行元素或換行內容間的距離，好比塊元素，行元素後有換行標籤，行內容後面有換行標籤。

 二、行高能夠被繼承。當子元素設置了行高並標記爲塊元素時將覆蓋父元素的行高。屬性值爲百分比時不會繼承百分比值，而是繼承計算後的值。

 三、內容區行高與字體尺寸有關。

 

利用行高 設置內容垂直居中的示例，注：內容區域不會垂直居中

 

  多行垂直居中

<div style="width:150px;height:100px;line-height:100px;background-color:#ccc;font-size:0;">
        <span style="display:inline-block;font-size:10px;line-height:1.4em;vertical-align:middle;">
             This is a test.<br/>
             This is a test.
        </span>
</div>

單行垂直居中示例

<div style="line-height:100px;border:dashed 1px black;">
      This is a test.
</div>