line-height、font-size、vertical-align是設(shè)置行內(nèi)元素布局的關(guān)鍵屬性。這三個(gè)屬性是相互依賴(lài)的關(guān)系，改變行間距離、設(shè)置垂直對(duì)齊等都需要它們的通力合作。在CSS字體里面已經(jīng)詳細(xì)介紹了font-size的相關(guān)內(nèi)容，本文將主要介紹line-height與vertical-align。

line-height

定義

　　line-height行高是指文本行基線(xiàn)之間的距離。行高line-height實(shí)際上只影響行內(nèi)元素和其他行內(nèi)內(nèi)容，而不會(huì)直接影響塊級(jí)元素，也可以為一個(gè)塊級(jí)元素設(shè)置line-height，但這個(gè)值只是應(yīng)用到塊級(jí)元素的內(nèi)聯(lián)內(nèi)容時(shí)才會(huì)有影響。在塊級(jí)元素上聲明line-height會(huì)為該塊級(jí)元素的內(nèi)容設(shè)置一個(gè)最小行框高度

　　值: <length> | <percentage> | <number> | normal | inherit

　　初始值: normal

　　應(yīng)用于: 所有元素

　　繼承性: 有

　　百分?jǐn)?shù): 相對(duì)于元素的字體大小font-size

　　要深入理解line-height，需要理解關(guān)于行框構(gòu)建的常用術(shù)語(yǔ)。

內(nèi)容區(qū)

　　對(duì)于行內(nèi)非替換元素或匿名文本某一部分，font-size和font-family確定了內(nèi)容區(qū)的高度。在宋體情況下，如果一個(gè)行內(nèi)元素的font-size為15px，則內(nèi)容區(qū)的高度為15px；而在其他字體情況下，內(nèi)容區(qū)的高度并不等于字體大小

行內(nèi)框

　　內(nèi)容區(qū)加上行間距等于行內(nèi)框。如果一個(gè)行內(nèi)非替換元素的font-size為15px，line-height為21px，則相差6px。用戶(hù)代理將這6像素一分為二，將其一半分別應(yīng)用到內(nèi)容區(qū)的頂部和底部，這就得到了行內(nèi)框

　　當(dāng)line-height小于font-size時(shí)，行內(nèi)框?qū)嶋H上小于內(nèi)容區(qū)

行框

　　行框定義為行中最高行內(nèi)框的頂端到最低行內(nèi)框底端之間的距離，而且各行框的頂端挨著上一行行框的底端

框?qū)傩?/p>

　　內(nèi)邊距、外邊距和邊框不影響行框的高度，即不影響行高

　　行內(nèi)元素的邊框邊界由font-size而不是line-height控制

　　外邊距不會(huì)應(yīng)用到行內(nèi)非替換元素的頂端和底端

　　margin-left、padding-left、border-left應(yīng)用到元素的開(kāi)始處；而margin-right、padding-right、border-right應(yīng)用到元素的結(jié)尾處

　　行內(nèi)替換元素需要使用line-height值，從而在垂直對(duì)齊時(shí)能正確地定位元素。因?yàn)関ertical-align的百分?jǐn)?shù)值是相對(duì)于元素的line-height來(lái)計(jì)算的。對(duì)于垂直對(duì)齊來(lái)說(shuō)，圖像本身的高度無(wú)關(guān)緊要，關(guān)鍵是line-height的值