如何理解vertical-align與line-height？
1.背景介紹
隨著互聯(lián)網(wǎng)的快速發(fā)展骚秦，人們對網(wǎng)頁美化的追求也達到了一個新的高度她倘，為了使網(wǎng)頁更好看璧微，我們需要精確控制行內(nèi)元素的的位置，如此硬梁，本節(jié)我們就來討論一下文字的兩個屬性：line-height和vertical-align前硫。
2.知識剖析
2.1 line-height基本概念
定義：行高是指文本行基線（base line）之間的垂直距離，也可以是中線之間的距離荧止，其實只要是兩行文字中相同位置的距離都可以表示line-hieght屹电。
2.2 line-height屬性可賦值
注意：1、行高是可以被繼承的跃巡，數(shù)字可以直接被繼承危号，然后再計算行高；而百分比是先計算出行高素邪，再以px繼承外莲。
? ? ? ? ? ?2、行高line-height實際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容兔朦，而不會直接影響塊級元素偷线，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內(nèi)聯(lián)內(nèi)容時才會有影響沽甥。
2.3? 行高的計算與繼承
? ? ? ? ? 1声邦、以em和百分比為單位的行高，其基數(shù)是元素本身的字體尺寸摆舟。
? ? ? ? ? 2亥曹、行高可以設定得比字體高度小，此時多行的文字將疊加到一起盏檐。
? ? ? ? ? 3歇式、行高是可繼承的，但是繼承的是計算值胡野，為了避免這種情況，可以為每個元素單獨定義行高痕鳍，但是這樣很煩瑣硫豆，因此可以定義 一個沒有單位的實數(shù)值作為縮放因子來統(tǒng)一控制行高，縮放因子是直接繼承的笼呆，而不是繼承計算值熊响。例如修改上例中的行高 為：“p { line-height : 1; }。
3.vertical-align基本概念與應用
3.1定義：使行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊诗赌。
? ?這個概念其實是相對vertical-align的默認值(baseline)來說的汗茄，vertical-align其實定義的是行內(nèi)元素垂直方向的對齊方式。
3.2 vertical-align的值
vertical-align的百分比值不是相對于字體大小或者其他什么屬性計算的铭若，而是相對于line-height計算的洪碳。允許設置負值递览。此處需要特別注意的是：垂直對齊屬性只對行內(nèi)元素有效。
4.圖像元素在塊級元素底部為什么留有空白瞳腌？
解決方案：vertical-align默認值是baseline, 也就是基線對齊绞铃。而基線是什么，基線就是字母X的下邊緣嫂侍。直接修改父級line-height值為0儿捧；設置為display：block；設置vertical-align：top/middle/bottom挑宠。
5.視頻資料
感謝大家觀看
今天的分享就到這里啦菲盾，歡迎大家點贊、轉(zhuǎn)發(fā)各淀、留言懒鉴、拍磚~
