本文内容是根據張鑫旭老師視訊課程内容編寫的
line-height定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分别加到一個文本行内容的頂部和底部。可以包含這些内容的最小框就是行框。
所有内聯元素的表現鬥魚行内框盒子模型有關
行内框盒子模型包含4種盒子
（1）内容區域（content area)是一種圍繞文字看不見的盒子，内容區域的大小與font-size有關；
（2）内聯盒子（inline boxes) 該盒子不會讓内容程塊顯示，而是排成一行
如果外部含inline水準的标簽（span、a、em等），則屬于“内聯盒子”如果是光秃秃的文字，則屬于“匿名内聯盒子”
（3）行框盒子（line boxes）每一行就是一個“行框盒子”，每個行框盒子“又是由一個個”内聯盒子“組成
（4）<p>标簽所在的”包含盒子“（containing box)，此盒子由一行行的”行框盒子“組成
是以”包含盒子“包含”行框盒子“，”行框盒子“包含”内聯盒子”
line-height的高度機理
看兩個例子
<p style="font-size:20px; line-height:0px;border:1px solid #918C8C;background-color:#BAB5B5">這是一個普通文字</p>
運作結果：
<p style="font-size:0px; line-height:20px;background-color:#BAB5B5;border:1px solid #918C8C;">這是一個普通文字</p>
由上面的結果可得<p></p>的高度不是由字型撐開的，而是由行高決定的，内聯元素的高度由行高決定
關于行高，還有幾點需要注意
（1）行高由于繼承影響無處不在，即使标簽内容隻有一行，也會受到行高的影響
（2）行高隻是幕後黑手，高度的表現不是行高，而是内容區域和行間距 内容區域（content area)+行間距（vertical spacing)=行高（line-height)
（3）内容區域（content area)高度隻與字型大小（font-size）有關,，與line-height沒有任何關系
總結：行高決定内聯盒子的高度：行間距牆頭草 可大可小（甚至負值），保證高度正好等同與行高
line-height的各類屬性值
normal:預設屬性值，與浏覽器有關，且與元素的字型有關，由于對浏覽器的不确定性，需要對line-height初始化
<number>:該數值可與目前的字型相乘來設定行間距
<length>:具體長度值，數值+機關
<percent>:相對于設定了該line-height屬性的元素的font-size大小計算（若font-size：20px；line-height：150%*20px=30px）
inherit:
line-height:1.5 line-height:150% line-height: 1.5em 的差別
應用元素有差别 line-height:1.5：所有可繼承元素根據font-size重計算行高
line-height:150%/1.5em ：目前元素根據font-size計算行高，繼承給下面的元素
body全局數值行高的使用經驗
以閱讀為主的網站 一般設定line-height：1.5
其他網站 以比對20px的使用經驗：body{font:14px;line-height:1.4286}(line-height:20px/14px)
行高line-height與圖像的表現
假設有如下代碼
<p style="background-color:#BBB7B7;"><img src="f:/html/img/tx1.jpg" /></p>
其運作結果如下
我們發現圖檔的下方有部分空白區域(由line-height和vertical-align産生），消除空白區域的方法
（1）圖檔塊狀化（塊狀化元素無基線對齊）:img{display:block}
（2）圖檔底線對齊: img{vertical-align:bottom}
（3）行高足夠小--基線位置上移 p{line-height:0;}
line-height的實際應用
（1）實作大小不固定的圖檔、多行文字的垂直居中
<pre name="code" class="css">.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}/*不是絕對定位，向上偏移1/2x*/
(2) 多行文本的水準垂直居中
.box{line-height:300px;text-align:center;}
.box>text{display:inline-block;line-height:normal;taxt-align:left;vertical-align:middle;}