[toc] ## line-height定義 line-height行高的定義就是指兩基線的間距， 也是純文本時文本所撐開的父級容器高度(`content-area/em-box`+`上下半行間距`)。 ## line-height的組成  ### em-box與content-area em就是1em那個的em，1em等同于一個font-size大小。 需要注意的是可見的**文字圖形區域**并**不一定**就等同于`em-box`。 對于漢字，1個漢字通常小于em-box（更小于content-area）。 對于英文，一些帶尾巴的英文字符q或則g，其小尾巴通常在em-box范圍外（但仍在content-area之內）。 **另外em-box(只受font-size影響)不等同于content-area(受font-size和font-family影響)** (通常內容區域高度要比em-box更高一些？) **但，** 當字體為宋體這種方方正正的字體時，內容區域和em-box可以看做是等價的（即被鼠標select后背景變藍的區域） >示例  （白色區域為內容區域，黃色為半行間距，可以發現宋體的內容區域大小等于em-box，即font-size） 但我們改變字體  （font-size不再等于content-area，content-area比font-size大） 可以發現行間距是一個墻頭草，在同一個行高下，即使font-size相同，行間距也可能是不一樣大小的。 行間距的作用就是保證內容區域+行間距正好等于行高  ### 半行間距 `行距=line-height-font-size` 而半行間距即是其一半 平均分為兩份后，再追加到em-box的頂部和底部就形成了行高。 >[info] 半行間距可以是負值，直接表現即是兩行文字可以交錯。 > ## line-height不會影響替換元素 ## line-height與垂直居中 行高之所以可以實現垂直居中，原因在于CSS中**行間距的上下等分機制**，So，換句話說，如果過行距的添加規則是在文字的上方或則下方，則行高是無法讓文字垂直居中的。 ## line-height的屬性值 normal 這個值的實際值是不固定的，不是1，而是根據字體變化而變化的 。。。 ## line-height的大值特性 ``` .box{ line-height:96px; } .box span{ line-height:20px; } ``` ``` .box{ line-height:20px; } .box span{ line-height:96px; } ``` 最終box的高度都為96px ## lineHeight頂點位置與border-box lineHegiht是從元素的content-box上邊開始計算的 故如果設置border-box，常常就會出現下面這種情況  因為height，line-height一樣，但設置了padding，故文字非但沒有居中還下沉了（因為lineHeight頂點從content-box開始計算）