如何理解vertical-align與line-height？
1.背景介紹
隨著互聯網的快速發(fā)展，人們對網頁美化的追求也達到了一個新的高度，為了使網頁更好看，我們需要精確控制行內元素的的位置，如此，本節(jié)我們就來討論一下文字的兩個屬性：line-height和vertical-align。
2.知識剖析
2.1 line-height基本概念
定義：行高是指文本行基線（base line）之間的垂直距離，也可以是中線之間的距離，其實只要是兩行文字中相同位置的距離都可以表示line-hieght。
2.2 line-height屬性可賦值
注意：1、行高是可以被繼承的，數字可以直接被繼承，然后再計算行高；而百分比是先計算出行高，再以px繼承。
? ? ? ? ? ?2、行高line-height實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。
2.3? 行高的計算與繼承
? ? ? ? ? 1、以em和百分比為單位的行高，其基數是元素本身的字體尺寸。
? ? ? ? ? 2、行高可以設定得比字體高度小，此時多行的文字將疊加到一起。
? ? ? ? ? 3、行高是可繼承的，但是繼承的是計算值，為了避免這種情況，可以為每個元素單獨定義行高，但是這樣很煩瑣，因此可以定義 一個沒有單位的實數值作為縮放因子來統(tǒng)一控制行高，縮放因子是直接繼承的，而不是繼承計算值。例如修改上例中的行高 為：“p { line-height : 1; }。
3.vertical-align基本概念與應用
3.1定義：使行內元素的基線相對于該元素所在行的基線的垂直對齊。
? ?這個概念其實是相對vertical-align的默認值(baseline)來說的，vertical-align其實定義的是行內元素垂直方向的對齊方式。
3.2 vertical-align的值
vertical-align的百分比值不是相對于字體大小或者其他什么屬性計算的，而是相對于line-height計算的。允許設置負值。此處需要特別注意的是：垂直對齊屬性只對行內元素有效。
4.圖像元素在塊級元素底部為什么留有空白？
解決方案：vertical-align默認值是baseline, 也就是基線對齊。而基線是什么，基線就是字母X的下邊緣。直接修改父級line-height值為0；設置為display：block；設置vertical-align：top/middle/bottom。
5.視頻資料
感謝大家觀看
今天的分享就到這里啦，歡迎大家點贊、轉發(fā)、留言、拍磚~
