line-height、font-size、vertical-align是設置行內元素佈局的關鍵屬性。這三個屬性是相互依賴的關係，改變行間距離、設置垂直對齊等都需要它們的通力合作。在CSS字體裡面已經詳細介紹了font-size的相關內容，本文將主要介紹line-height與vertical-align。
line-height定義line-height行高是指文本行基線之間的距離。行高line-height實際上只影響行內元素和其他行內內容，而不會直接影響塊級元素，也可以為一個塊級元素設置line-height，但這個值只是應用到塊級元素的內聯內容時才會有影響。在塊級元素上聲明line-height會為該塊級元素的內容設置一個最小行框高度
值: <length> | <percentage> | <number> | normal | inherit
初始值: normal
應用於: 所有元素
繼承性: 有
百分數: 相對於元素的字體大小font-size
術語要深入理解line-height，需要理解關於行框構建的常用術語。
內容區對於行內非替換元素或匿名文本某一部分，font-size和font-family確定了內容區的高度。在宋體情況下，如果一個行內元素的font-size為15px，則內容區的高度為15px；而在其他字體情況下，內容區的高度並不等於字體大小
行內框內容區加上行間距等於行內框。如果一個行內非替換元素的font-size為15px，line-height為21px，則相差6px。用戶代理將這6像素一分為二，將其一半分別應用到內容區的頂部和底部，這就得到了行內框
當line-height小於font-size時，行內框實際上小於內容區
行框行框定義為行中最高行內框的頂端到最低行內框底端之間的距離，而且各行框的頂端挨著上一行行框的底端
框屬性內邊距、外邊距和邊框不影響行框的高度，即不影響行高
行內元素的邊框邊界由font-size而不是line-height控制
外邊距不會應用到行內非替換元素的頂端和底端
margin-left、padding-left、border-left應用到元素的開始處；而margin-right、padding-right、border-right應用到元素的結尾處
替換元素行內替換元素需要使用line-height值，從而在垂直對齊時能正確地定位元素。因為vertical-align的百分數值是相對於元素的line-height來計算的。對於垂直對齊來說，圖像本身的高度無關緊要，關鍵是line-height的值
默認地，行內替換元素位於基線上。如果向替換元素增加下內邊距、外邊距或邊框，內容區會上移。替換元素的基線是正常流中最後一個行框的基線。除非，該替換元素內容為空或者本身的overflow屬性值不是visible，這種情況下基線是margin底邊緣
vertical-align定義vertical-align用來設置垂直對齊方式，所有垂直對齊的元素都會影響行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
應用於: 行內元素、替換元素、表單元格
繼承性: 無
百分數: 相對於元素的行高line-height
[注意]IE7-瀏覽器中vertical-align的百分比值不支持小數行高，且取baseline、middle、text-bottom等值時與標準瀏覽器在展示效果不一樣，常用的解決辦法是將行內元素設置display:inline-block
CSS Code複製內容到剪貼板