line-height 與vertical-align
阿新 • • 發佈:2017-05-28
影響 height tro spl span images ont 不同的 -1
本文的重點是了解vertical-align和line-height的使用
涉及到的名詞:基線,底端,行內框,行框,行間距,替換元素及非替換元素,對齊。只有充分理解這些概念才會靈活運用這兩個屬性。
什麽是對齊
對齊一定是涉及兩個對象:對齊元素以及要對齊的對象;比如在軍訓時教官喊稍息,我們每個人都會有一個參照的標準去站齊。
而行內元素的對齊,除了行內元素本身,還有一個參考系,這個參考系就是行框的基線,而行框的基線依據於行內框元素的基線位置。
什麽是基線
每一個文本元素自身都會有四條線,頂線,中線,基線,底線。而基線一般是指文本元素中以x字母為準,x字母的下邊緣為該文本元素的基線。
而行高則是兩個文本行基線之間的距離,往往使段落產生間距。
但是也可以這樣理解,行高 = 字體大小 + 上半行距 + 下半行距(其中上下半行距相等,這個等式可以從圖中推導出來)
每一個文本元素和文本行元素,都會有一條基線,基線的位置受到文本的字體格式以及line-height的影響。
什麽是行框和行內框
<span>span</span> text <em>em</em> <i>yuan</i>
在每一個段落行內,不同的行內元素除了包裹自身內容的內容框之外,還會自動生成一個行內框,其中沒有標簽包裹的文本會生成匿名行內框,不同的行內框會根據各自不同的line-height產生行間距,而行框則會剛好包括最高的頂端和最低的底端,從而來生成行框。
span{ display: inline-block; width: 50px; line-height: 80px; background-color: darkcyan; font-size: 20px; } em{ display: inline-block; width: 50px; line-height: 50px; background-color: rebeccapurple; } i{ display: inline-block; width: 50px; line-height: 30px; background-color: green; }
line-height 與vertical-align