css line-height

對行高一直都是隻知其一;不知其二的，因此在工做中常常會遇到這樣那樣的問題，與其每次都踩坑，不如瞭解下它究竟是什麼。

行高 行距

要了解行高，先了解下字體的結構：頂線，中線，基線，底線

這裏要注意基線和底線，在vertical-align中默認的屬性是baseline基線，說的就是這裏的基線。

行高: 文本基線之間的距離。

行距: 文本底線和頂線之間的距離。

經過圖咱們能夠看出行高仍是等於字體大小加上行距，即

line-height = font-size + 行距

行內框 行框 內容區

行內框：行內框的高度等於字體的高度，當設置行高時，行內框不變，改變的是行距，當設置padding的時候，行內高不變，改變的是內容區域。

行框：一行文本中，可能有多種不一樣的文本，可是他們的基線baseline是對其的，即在一條水平線上，此時不一樣的文本有不一樣的行內框，可是改行的行框是以本行最大的爲準。

內容區域：內容區域是font-size+padding

居中

上面咱們瞭解到line-height = font-size + 行距，那麼也就是line-height = 半行距 + font-size + 半行距，因此咱們常常在文本居中中會使用到height = line-height = xx px。