1.定義
? ?行高:兩行文字baseline(基線)之間的距離

? ?示意圖：

?

2.為何line-height可以讓單行文本垂直居中 ? ?
? ?其實并沒有垂直居中，除非將font-size:0;

?

3.line-height的高度原理（可以先看看行內盒子的原理）
? ?* 行內元素的高度是line-height決定的，而不是由font-size決定的，
? ?* 行高由于其繼承性，影響無處不在，即使單行文本也不例外
? ?* 行高只是幕后黑手，高度的表現不是行高，而是內容區域和行間距
? ?* 內容區域高度+行間距 = 行高
? ? ? 內容區域高度至于字號以及字體有關，與line-height無關

?

4.比較有用的屬性值
? ?* line-height:1.5;line-height:150%;line-height:1.5em;
? ? ? 實際的line-height: font-size*1.5，適合頁面自適應

? ?* 區別:
? ? ? * 1.5: 所有可繼承元素根據自身的font-size重計算行高
? ? ? * 150%/1.5em: 當前元素根據font-size計算行高，子元素繼承該行高

分析：div的行高: line-height:24px*1.5,span的行高 line-height:60px*1.5
<div style="background:#eee;font-size:24px;line-height:1.5;"><span style="font-size:60px;">測試1</span>
</div>

分析: div的行高: line-height:24px*1.5,span繼承div的行高 line-height:24px*1.5
<div style="background:#eee;font-size:24px;line-height:150%;">
  <span style="font-size:60px;">測試2</span>
</div>

?

* 繼承性（IE8+）
? ?input框等元素默認行高是normal，使用inherit可以讓文本框樣式可控性更強

* 使用經驗
? ?body{font-size:14px;line-height:1.4286} ?=> line-height:20px;

?

5.line-height和圖片的表現
? * 行高不會影響圖片實際占據的高度
? * 消除圖片底部間隙的方法
? ? a.圖片塊狀化 - 無基線對齊 ??img{display:block;}
? ? b.圖片底線對齊 ?img{vertical-align:bottom;}
? ? c.行高足夠小 - 基線位置上移?.box{line-height:0;}

6.line-height的實際應用
? ?* 大小不固定的圖片垂直居中（IE8+）

.box{height:300px;line-height:300px;text-align:center;}
.box>img{vertical-align:middle;/*基線網上1/2高度*/}

? * 多行文本垂直居中（IE8+）

.box{line-height:250px;text-align:center;}
.box>.text{display:inline-block;line-height:normal;text-align:left;vertical-align:middle;}
/* 重置外部繼承的line-height、text-align */

? * 代替height，避免IE6/IE7下的haslayout

<span class="out"><span class="in1">height:36px;</span>
</span>
<span class="out"><span class="in2">line-height:36px;</span>
</span>.out{display:inline-block;/*或float:left*/}
.in1{display:block;height:36px;}
.in2{display:block;line-height:36px;}/*結果:在IE6/IE7下，out容器的 inline-block,給變成了block*/

?

轉載于:https://www.cnblogs.com/xfz1987/p/5650458.html

總結

以上是生活随笔為你收集整理的深入了解line-height的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。