[1]line-height [2]font-size [3]vertical-align
目錄
[1]行高 [2]字體大小 [3]垂直對齊前面的話
line-height、font-size、vertical-align這三個屬性可謂是相互依賴的關係，改變行間距離、設置垂直對齊等都需要這三個屬性的通力合作。本文涉及到的一些術語詳細解釋請參考塊級元素基本術語和行內元素基本術語
line-height
定義
line-height行高是指文本行基線之間的距離。在應用到塊級元素時，line-height定義了元素中文本基線之間的最小距離；在應用到行內元素時，line-height定義了元素行內框的高度
值: <length> | <percentage> | <number> | normal | inherit
初始值: normal
應用於: 所有元素
繼承性: 有
百分數: 相對於元素的字體大小font-size
作用
行高line-height會顯著影響行內元素如何顯示。行高line-height實際上隻影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。在塊級元素上聲明line-height會為該塊級元素的內容設置一個最小行框高度
font-size
font-size字體大小設置的是字體中字元em框的高度，實際的字元字形通常比字元em框要矮
值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit
初始值: medium
應用於: 所有元素
繼承性: 有
百分數: 相對於父元素的字體大小font-size
vertical-align
vertical-align用來設置垂直對齊方式，所有垂直對齊的元素都會影響行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
應用於: 行內元素、替換元素、表單元格
繼承性: 無
百分數: 相對於元素的行高line-height
[註意]vertical-align不影響塊級元素中內容的對齊
vertical-align:baseline(元素的基線與父元素的基線對齊)
vertical-align:sub(降低元素的基線到父元素合適的下標位置)
vertical-align:super(升高元素的基線到父元素合適的上標位置)
vertical-align:bottom(把對齊的子元素的底端與行框底端對齊)
vertical-align:text-bottom(把元素的底端與父元素內容區域的底端對齊)
vertical-align:top(把對齊的子元素的頂端與行框頂端對齊)
vertical-align:text-top(把元素的頂端與父元素內容區域的頂端對齊)
vertical-align:middle(元素的中垂點與父元素的基線加1/2父元素中字母X的高度對齊)
vertical-align:(+-n)px(元素相對於基線上下偏移npx)
vertical-align:x%(相對於元素的line-height值)
vertical-align:inherit(從父元素繼承vertical-align屬性的值)
inline-block底部空隙
inline-block元素在塊級元素中留空隙就是因為圖像的預設垂直對齊方式是基線對齊(基線對齊在原理上圖像底邊與匿名文本大寫英文字母X的底邊對齊)；而匿名文本是有行高的，所以X的底邊距離行框有一段距離，這段距離就是圖像留出的空隙
於是，解決這個問題有以下幾個解決辦法
[1]display:block
因為垂直對齊方式只能作用於替換元素和行內元素，更改為塊級元素，會使垂直對齊方式失效
[2]父級的line-height: 0
這樣使匿名文本與行框的距離為0
[3]vertical-align: top/middle/bottom
