摘要：行盒的寬度由其包含塊給予，但可能因浮動而縮小。絕對定位不可替換元素的使用值約束為包含塊寬度如果和均為首先將以及值為的設為。

2015/10/08： 原“10.8標題 行盒高度計算”改為“10.8 行高計算”。英文原文為“l(fā)ine height”。由于翻譯時候看到那段結論是行盒的高度，腦抽就把原本翻譯對的標題改了下，剛回顧一番深覺不妥，故改回來。

原文：http://www.w3.org/TR/CSS2/visudet.html

譯者注：本文未全文翻譯（最近要校招找工作，所以學習壓力大，先挑重頭，所以暫省略了最大最小寬度高度兩部分）。文中部分內容和配圖是我自己的理解，但沒有一一標注。此外，文中有許多術語，我都有在后面注明原英文。最后要吐槽以下，vertical-align 屬性在各瀏覽器中的兼容性真是跪了，如果讀者有了解這個兼容性問題，請務必留言解惑！之后我也會抽空解決這個屬性問題噠！

元素的盒的位置和大小有時會根據(jù)某一矩形來計算，該矩形被稱為該元素的包含塊。一個元素的包含塊定義如下：

根元素所在的包含塊是一個被稱為初始包含塊 Initial Containing Block 的矩形，在連續(xù)媒體中，其尺寸為視口大小，其基點為畫布原點。在分頁媒體中，初始包含塊即為頁面區(qū)域 Page Area。初始包含塊的 direction 屬性與根元素的一致。

對于其他元素而言，如果元素 position 為 relative 或 static，其包含塊為最近的塊容器祖先盒的內容邊緣。

如果元素有 position: fixed，其包含塊由連續(xù)媒體中的視口或分頁媒體中的頁面區(qū)域創(chuàng)建。

如果元素有 position: absolute，在以下情況下，其包含塊由 position 值為 absolute，relative，fixed 的最近祖先創(chuàng)建：

如果該祖先元素為行內元素，包含塊即圍繞著為該元素生成的第一個和最后一個行內盒的內邊距盒的邊界盒。在CSS2.1中，如果該行內元素分跨多行，則包含塊未定義。

否則，包含塊由該祖先元素的內邊距邊緣構成。

如果沒有這樣的祖先元素，包含塊即初始包含塊。

在分頁媒體中，一個絕對定位元素相對于其包含塊定位，并忽略所有的換頁（如同文檔是連續(xù)的）。該元素可能隨后被打斷而分布在幾個頁面之中。

對于絕對定位內容，如果解析為頁面上的一個位置而不是正在布局的頁面（當前頁面），或解析為已經(jīng)為打印而渲染出來的當前頁面的一個位置，打印機可能將該內容放置于：

當前頁的其他位置

下一頁，或者

省略該內容

注意：一個分布在多頁的塊級元素在每頁的寬度可能不同，并且可能會存在設備特定限制。

在沒有定位的情況下，下面文檔：

    


  

    
This is text in the first paragraph...
    
This is text  in the 
    second paragraph.
  

的包含塊如下建立：

生成盒子的元素 => 生成包含塊的元素

html => 初始包含塊（依賴于用戶代理）

body => html

div1 => body

p1 => div1

p2 => div1

em1 => p2

strong1 => p2

如果我們給 div1 定位：

#div {
    position: absolute;
    left: 50px;
    top: 50px;
}

其包含塊就不再是 body 了；包含塊現(xiàn)在成了初始包含塊（因為沒有別的定位了的祖先盒）。

如果我們同樣給 em1 定位：

#div1 {
    position: absolute;
    left: 50px;
    top: 50px;
}
#em1 {
    position: absolute;
    left: 100px;
    top: 100px;
}

生成盒表格變成了：

生成盒子的元素 => 生成包含塊的元素

html => 初始包含塊（依賴于用戶代理）

body => html

div1 => 初始包含塊

p1 => div1

p2 => div1

em1 => div1

strong1 => em1

給 em1 定位后，其包含塊變成了最近的定位了的祖先盒（即 div 生成的盒）。

譯者注：屬性介紹略，可查CSS手冊

該屬性指定盒的內容寬度。

該屬性不適用于不可替換行內元素。不可替換行內元素的盒的寬度即（在子元素的任何相對位置之前）其中渲染內容的寬度。回想下，行內盒是排進行盒的。行盒的寬度由其包含塊給予，但可能因浮動而縮小。

屬性值有如下意義：

長度

指定一個長度單位的內容區(qū)域寬度。

百分比

指定一個百分比寬度。百分比根據(jù)生成盒的包含塊的寬度計算。CSS2.1中，如果包含塊的寬度依賴于該元素的寬度，那么布局結果為未定義。注意：對于包含塊是基于一個塊容器元素的絕對定位元素而言，百分比是根據(jù)該塊容器元素的內邊距盒的寬度計算的。這是對CSS1的修改，CSS1中百分比寬度始終根據(jù)父元素的內容盒計算。

auto

寬度取決于其他屬性。參見下文。

負值的 width 非法。

例如，下面的規(guī)則將段落的內容寬度改成100像素。

p { width: 100px }

元素用于布局的 width、margin-left、margin-right、left 以及 right 屬性，其值取決于生成盒的類型以及屬性彼此。（布局所采用的值有時被稱為使用值）?；旧?，使用值同計算值一致，是把計算值 auto 替換為某些適當值，而百分比根據(jù)包含塊計算，但也有例外。需要辨析下列情形：

行內不可替換元素

行內可替換元素

常規(guī)流中塊級不可替換元素

常規(guī)流中塊級可替換元素

浮動不可替換元素

浮動可替換元素

絕對定位不可替換元素

絕對定位可替換元素

常規(guī)流中行內塊不可替換元素
10. 常規(guī)流中行內塊可替換元素

1-6點和9-10點中，相對定位元素的 left 和 right 值根據(jù)9.4.3章節(jié)規(guī)則計算。

注意：下面計算出的 width 的使用值不一定是最終結果，視 min-width 和 max-width，有可能必須多次計算，參見本章下述的最小和最大寬度。

width 值無效。margin-left 和 margin-right 的 auto 計算值轉換為使用值 0。

margin-left 和 margin-right 的 auto 計算值轉換為使用值 0。

如果 height 和 width 計算值均為 auto并且該元素有固有寬度，那么固有寬度即 width 的使用值。

如果 height 和 width 計算值均為 auto并且該元素沒有固有寬度，但有固有高度和固有比例；或者如果 width 計算值為 auto，height 有其他計算值，并且元素有固有比例；那么 width 的使用值為：

高度使用值 * 固有比例

如果 height 和 width 計算值均為 auto并且該元素有固有比例，但沒有固有高度或固有寬度，那么CSS2.1中 width 的該使用值未定義。然而建議是，如果包含塊的寬度本身不依賴于該可替換元素的寬度，那么 width 的使用值根據(jù)常規(guī)流中塊級不可替換元素的約束方程式來計算。

否則，如果 width 有計算值 auto，并且元素有固有寬度，那么固有寬度即 width 使用值。

否則，如果 width 有計算值 auto，但不符合以上任何條件，那么 width 使用值為300px。如果300px太寬超出設備，用戶代理應當代之使用2:1比例且設備容得下的最大矩形的寬度。

下述約束必須在下述其他屬性的使用值中成立：

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含塊寬度

如果 width 不為 auto 且 border-left-width + padding-left + width + padding-right + border-right-width（加上不為 auto 的 margin-left 或 margin-right）比包含塊的寬度還要寬，那么以下規(guī)則中 margin-left 和 margin-right 的任何 auto 值都被視為零。

如果以上所有屬性的計算值都不為 auto，則這些值被稱為“過度約束”，且其中一個使用值必須同其計算值不同。如果包含塊的 direction 屬性值為 ltr，則忽略 margin-right 的指定值，其值計算成使得等式成立的值。如果 direction 屬性值為 rtl，則更改 margin-left。

譯者：getComputedStyle 以及 Console 面板上的盒模型顯示的是計算值而非使用值。當三個屬性被過度約束時，某一個外邊距（視 direction 屬性而定）的計算值盡管是指定值，但其實使用值是根據(jù)公式來計算的。

如果其中正好僅一個值指定為 auto，則該值由等式計算得出。

如果 width 設為 auto，那么其他任何 auto 值變?yōu)?0 并且 width 由等式計算得出。

如果 margin-left 和 margin-right 均為 auto，其使用值相等。將根據(jù)包含塊的邊緣水平居中該元素。

width 的使用值根據(jù)行內可替換元素的規(guī)則決定。外邊距根據(jù)不可替換塊級元素的規(guī)則決定。

如果 margin-left 或 margin-right 計算為 auto，則使用值為 0。

如果 width 計算為 auto，則使用值為“收縮適應”寬度。

計算收縮適應寬度同計算使用自動表格布局算法的表格單元格的寬度相似。大致上：以除明確換行以外的地方以外都不斷行的方式格式化內容來計算首選寬度，同時也計算首選最小寬度，比如說，通過嘗試所有斷行來計算。接著，找到可用寬度：在這種情況下，該寬度是包含塊的寬度減去 margin-left，border-left-width，padding-left，padding-right，border-right-width，margin-right，以及所有相關滾動條的寬度。

那么該收縮適應寬度即：min(max(首選最小寬度,可用寬度),首選寬度)。

如果 margin-left 或 margin-right 計算值為 auto，則其使用值為 0。width 的使用值同行內可替換元素算法。

為講述本節(jié)和下節(jié)，術語（一個元素的）“靜態(tài)位置”粗略指的是假設元素在常規(guī)流中的位置。精確地講：

靜態(tài)位置包含塊 Static-position Containing Block 是假定元素 position 指定值為 static 且 float 為 none 時，元素的第一個盒的包含塊。（注意由于9.7節(jié)的規(guī)則，假定計算可能要求假定一個不同的 display 計算值）。

left 的靜態(tài)位置是從包含塊的左邊緣到假定元素 position 值為 static 且 float 值為 none 時，成為其第一個盒的假定盒的左外邊距邊緣的距離。如果假定盒在包含塊左邊，該值為負。

right 的靜態(tài)位置是從包含塊的右邊緣到上述假定盒的右外邊距邊緣的距離。如果假定盒在包含塊左側，該值為正。

但與其真的計算假定盒的尺寸，用戶代理可以自由假定可能位置。

為計算靜態(tài)位置，固定定位元素的包含塊是初始包含塊而非視口，并且所有可滾動盒應被假定為滾動到其原位。

絕對定位不可替換元素的使用值約束為：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含塊寬度

如果 left、width 和 right 均為 auto：首先將 margin-left 以及 margin-right 值為 auto 的設為0。接著，如果建立靜態(tài)位置包含塊的元素的 direction 屬性為 ltr，則設 left 為靜態(tài)位置并應用下述的第三條規(guī)則；否則，設置 right 并應用第一條規(guī)則。

如果三者均不為 auto：如果 margin-left 和 margin-right 為 auto，在兩個外邊距值相等的這一額外約束條件下計算方程式，當計算結果為負時，如果包含塊的 direction 為 ltr（rtl），設置 margin-left（margin-right）為零并計算 margin-right（margin-left）。如果 margin-left 和 margin-right 之一為 auto，計算等式求其值。如果二值過度約束，忽略 left 值（direction 為 rtl 情況下）或者忽略 right（direction 為 ltr 情況下）并重新計算此值。

否則，設置 margin-left 和 margin-right 值為 auto 的為0，并采取以下六條適用規(guī)則之一。

left 和 width 為 auto 且 right 不為 auto，則 width 收縮適應。接著計算 left。

left 和 right 為 auto 且 width 不為 auto，如果建立靜態(tài)位置包含塊的元素的 direction 屬性為 lrt 則設 left 為靜態(tài)位置，否則設置 right。接著計算 left（如果 direction 為 rtl）或 right（如果 direction 為 ltr）。

width 和 right 為 auto 且 left 不為 auto，則 with 收縮適應。接著計算 right。

left 為 auto，width 和 right 不為 auto，計算 left。

width 為 auto，left 和 right 不為 auto，計算 width。

right 為 auto，left 和 width 不為 auto，計算 right。

計算收縮適應寬度同計算使用自動表格布局算法的表格單元格的寬度相似。大致上：以除明確換行以外的地方以外都不斷行的方式格式化內容來計算首選寬度，同時也計算首選最小寬度，比如說，通過嘗試所有斷行來計算。CSS2.1沒有規(guī)定確切算法。接著，找到可用寬度：通過設定 left（第一種情況）或者 right（第三種情況）為0后計算寬度。

那么收縮適應寬度為：min(max(首選最小寬度,可用寬度),首選寬度)

這種情況下，10.3.7節(jié)中直到約束方程式都適用，但該節(jié)接下來的部分由以下規(guī)則替代：

width 的使用值計算同行內可替換元素。如果 margin-left 或 margin-right 指定為 auto，使用值取決于下述規(guī)則。

left 和 right 的值都為 auto 情況下，如果建立靜態(tài)位置包含塊的元素的 direction 屬性為 ltr，將 left 設為靜態(tài)位置，而如果 direction 為 ltr，設 right 為靜態(tài)位置。

如果 left 或 right 為 auto，設 auto 的 margin-left 和 margin-right 為0。

如果這時候 margin-left 和 margin-right 還是 auto，在兩個外邊距值必須相等的這一額外約束條件下計算方程式，當計算結果為負時，如果包含塊的 direction 為 ltr（rtl），設置 margin-left（margin-right）為零并計算 margin-right（margin-left）。

如果這時候剩下一個 auto，運算方程式得到該值。

如果這時候值（譯者注：margin-left 和 margin-right）被過度約束，忽略 left（包含塊的 direction 屬性為 rtl情況下）或者 right（direction 為 ltr情況下）并重新計算此值。

如果 width 為 auto，使用值為收縮適應寬度，同浮動元素。

計算值為 auto 的 margin-left 或 margin-right 使用值為0。

同行內可替換元素。

譯者注：暫省

百分比根據(jù)生成盒的包含塊高度計算。如果包含塊的高度未明確指定（如，該高度取決于內容高度），且本元素不是絕對定位，則計算值為 auto。根元素上的百分比高度則相對于初始包含塊。注意：對于包含塊基于塊級元素的絕對定位元素而言，該百分比是根據(jù)該塊級元素的內邊距盒高度計算的。這是從CSS1來的變化，CSS1中百分比始終根據(jù)父元素的內容盒計算。

注意：絕對定位元素的包含塊的高度與絕對定位元素本身無關，因此這種元素的百分比高度總是可以解出。然而，該高度可能直到文檔中后面的元素全被處理后才知道。

負值非法。

為計算 top，margin-top，height，margin-bottom 和 bottom，須在不同盒中作以下區(qū)分：

行內不可替換元素

行內可替換元素

常規(guī)流內塊級不可替換元素

常規(guī)流內塊級可替換元素

浮動不可替換元素

浮動可替換元素

絕對定位不可替換元素

絕對定位可替換元素

常規(guī)流內行內塊不可替換元素
10. 常規(guī)流內行內塊可替換元素

1-6 和 9-10 點中，top 和 bottom 的使用值取決于9.4.3節(jié)的規(guī)則。

注意：這些規(guī)則同適用其他任何元素一樣適用于根元素。

注意：下面計算出的 height 的使用值不一定是最終結果，且視 min-height 和 max-height 可能重復計算多次，參見下面“最小和最大高度”。

圖片來源：http://blog.justfont.com/

譯者注：行高盒 EM-Box 即上下端線之間的高度盒子

height 不適用。內容區(qū)域的高度應基于字體，但本規(guī)范沒有指定如何。用戶代理可能，比如說，使用行高盒 Em-Box 或字體的最大上端部 Ascender 和下端部 Descender。（后一種會確保有部分在行高盒之上或之下的字符仍然落在內容區(qū)域內，但會導致不同字體有大小不一的盒子；前者則確保作者可以控制相對于 line-height 的背景設計，但也導致字符繪制在其內容區(qū)域之外。）

注意：CSS3可能將引入一個屬性來選擇為內容高度使用哪種字體方案。

一個行內不可替換盒的垂直內邊距、邊框和外邊距從內容區(qū)域的頂部和底部開始，同 line-height 無關。但只有 line-height 被用于計算行盒高度。

本規(guī)范沒有規(guī)定使用了不止一種字體（當字符來源于不同字體時就可能這樣）時的內容區(qū)域高度。然而我們建議應選擇該高度來使得內容區(qū)域正好足夠高來容納（1）行高盒或者（2）元素內所有字體的最大上端部和下端部。注意，根據(jù)這些字體的基線對齊方式的不同，這個高度可能比任何相關字體字號都要大。

如果 margin-top 或者 margin-bottom 為 auto，其使用值為0。

如果 height 和 width 計算值均為 auto 且該元素有固有高度，那么該固有高度為 height 使用值。

否則，如果 height 計算值為 auto，且該元素有一個固有比例，則 height 的使用值為：

width 使用值 / 固有比例

否則，如果 height 計算值為 auto，且該元素有固有高度，那么該固有高度為 height 使用值。

否則，如果 height 計算值為 auto，但以上情況均不符合，那么 height 的使用值必須設定為一個最大矩形的高度，該矩形比例為2:1，高度不超過150px，且寬度不大于設備寬度。

本節(jié)同樣適用于 overflow 計算值非 visible 但已經(jīng)傳播到視口的文檔流內塊級不可替換元素。

如果 margin-top 或者 margin-bottom 為 auto，其使用值為0。如果 height 為 auto，則該高度取決于該元素是否有塊級子元素以及該元素是否有內邊距或者邊框：

該元素的高度是從其上內容邊緣到如下第一個符合情形的距離：

其最后一個行盒的下邊緣，如果該盒建立了一個包含一行或多行的行內格式化上下文

其最后一個文檔流內子元素的下（可能折疊）外邊距的下邊緣，如果該子元素的下外邊距沒有同該元素的下外邊距折疊

其最后一個文檔流內子元素的下邊框邊緣，如果該子元素的上外邊距沒有同該元素的上外邊距折疊

否則零

只有文檔流內的子元素才在考慮范圍之內（如，浮動盒和絕對定位盒要被忽略，相對定位盒則不考慮其位移）。注意子盒可能是個匿名塊盒。

為講述本節(jié)和下節(jié)，術語（一個元素的）“靜態(tài)位置”粗略指的是元素在常規(guī)流中的位置。精確地講，top 的靜態(tài)位置是從包含塊的上邊緣到假設元素 position 值為 static，float 為 none，clear 為 none 時，作為該元素的首個盒的假定盒的上外邊距邊緣的距離。（注意由于9.7節(jié)的規(guī)則，假定計算可能要求假定一個不同的 display 計算值）。

但與其真的計算假定盒的尺寸，用戶代理可以自由假定可能位置。

為計算靜態(tài)位置，固定定位元素的包含塊是初始包含塊而非視口。

絕對定位不可替換元素的垂直尺寸使用值必須滿足如下約束：

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = 包含塊高度

如果 top、height 和 bottom 均為 auto，設 top 為靜態(tài)位置，并應用下面第三條規(guī)則：

如果三者均不為 auto：如果 margin-top 和 margin-bottom 為 auto，在兩個外邊距值相等的這一額外約束條件下計算方程式。如果 margin-top 和 margin-bottom 之一為 auto，計算等式求其值。如果二值過度約束，忽略 bottom 值并重新計算此值。

否則，采取以下六條適用規(guī)則之一。

top 和 height 為 auto 且 bottom 不為 auto，則 height 在10.6.7基礎上，設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 top。

top 和 bottom 為 auto 且 height 不為 auto，則設 top 為靜態(tài)位置，設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 bottom。

height 和 bottom 為 auto 且 top 不為 auto，則 height 在10.6.7基礎上，設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 bottom。

top 為 auto，height 和 bottom 不為 auto，則設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 top。

height 為 auto，top 和 bottom 不為 auto，則設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 height。

bottom 為 auto，top 和 height 不為 auto，則設值為 auto 的 margin-top 和 margin-bottom 為0，并計算 bottom。

除了元素有固有高度外，其他情形同上節(jié)相似。替代序列現(xiàn)為：

height 的使用值同行內可替換元素計算。如果 margin-top 或 margin-bottom 指定值為 auto，其使用值由下述規(guī)則決定。

如果 top 和 bottom 均為 auto，使用元素的靜態(tài)位置替換 top。

如果 bottom 為 auto，值為 auto 的 margin-top 或 margin-bottom 替換為0。

如果此時 margin-top 和 margin-bottom 仍為 auto，在兩個外邊距必須取等值這一額外約束條件下計算方程式。

如果此時只剩一個 auto，運算方程式求值。

如果此時二值過度約束，忽略 bottom 值并重新計算此值。

本節(jié)適用于：

overflow 計算值非 visible（除去此 overflow 屬性值被已經(jīng)傳播到視口的情形）的文檔流內塊級不可替換元素。

行內塊不可替換元素

浮動不可替換元素

如果 margin-top 或者 margin-bottom 為 auto，其使用值為0。如果 height 為 auto，則該高度取決于10.6.7節(jié)中元素的后代。

對于行內塊元素，其外邊距盒納入其行盒高度的計算。

某些情況下（參見，如，上面的10.6.4和10.6.6節(jié)），建立塊格式化上下文的元素的高度按如下所述計算：

如果該元素只有行內級子元素，其高度為最上行盒的頂部到最下行盒的底部的距離。

如果該元素有塊級子元素，其高度為最上塊級子盒的上外邊距邊緣到最下塊級子盒的下外邊距邊緣的距離。

絕對定位子元素須忽略，決定定位盒不考慮其位移。注意子盒可能是匿名塊盒。

此外，如果該元素有下外邊距邊緣低于該元素下內容邊緣的浮動子元素，那么高度將增大來包含那些邊緣。只有參與本塊格式化上下文的浮動才考慮在內，比如，在絕對定位后代中的或者其他浮動中的浮動就不考慮。

譯者注：暫省

正如行內格式化上下文一節(jié)中所述，用戶代理將行內級盒排進一個行盒的垂直棧。行盒的高度決定如下：

計算行盒內每個行內級盒的高度。對于可替換元素、行內塊元素以及行內表格元素，高度是其外邊距盒的高度；對于行內盒，高度是其 line-height。（參見“計算高度和外邊距”以及“行距和半行距”中的行內盒高度。）

行內級盒根據(jù)其 vertical-align 屬性垂直對齊。如果它們對齊 top 或 bottom，它們必須以能最小化行盒高度的方式對齊。如果這些盒足夠高，則有多種解決方案并且CSS2.1沒有規(guī)定此行盒的基線的位置（即，支柱 Strut 位置，參見下面）。

行盒高度是最上盒頂部到最下盒底部的距離。（包括支柱，解釋參見下述 line-height。）

空行內元素生成空行內盒，但這些盒仍然有外邊距、內邊距、邊框和一個行高，因此跟有內容的元素一樣會影響計算。

CSS 假設每種字體都由字體特性來指定一個基線之上的特性高度和之下的特性深度。本節(jié)中我們用A表示（給定字體給定字號的）高度，用D表示深度。同時定義 AD = A + D，即從頂部到底部的距離。（參見下面如何找到TrueType和OpenType字體的A和D）注意該字體的這些特性是就整個而言的，無須對應任何個別字符的上端部和下端部。

用戶代理必須在一個不可替換行內盒中依照字符的相應基線對齊各個字符。接著，就每個字符來決定A和D。注意單個元素的字符可能來自于不同字體因此不見得所有的A和D一樣。如果行內盒完全不包含字符，則被視為包含了一個具有元素首個可用字體的A和D的支柱（一個零寬度的不可見字符）。

接著對每個字符添加行距L，其中 L = line-height - AD。行距的一般添加到A之上，另一半添加到D之下，從而賦予字符以及其行距一個基線之上的完整高度 A" = A + L/2，以及完整深度 D" = D+ L/2。

注意。L可能為負。

包含了所有字符以及字符兩側半行距的行內盒的高度正是 line-height。子元素的盒不影響這個高度。

盡管不可替換元素的外邊距、邊框以及內邊距不納入行盒的計算，它們仍然渲染在行內盒的周圍。這意味著如果 line-height 指定的高度小于被包含盒的內容高度，內邊距和邊框的背景和顏色可能“流進”毗鄰的行盒。用戶代理應當按文檔順序渲染這些盒。這會造成后面的盒的邊框繪制在前面盒的邊框和文本上。

注意。CSS2.1沒有定義什么是行內盒的內容區(qū)域（參加上面的10.6.1）因此不同的用戶代理可能把背景和顏色繪制在不同地方。

注意。推薦OpenType和TrueType字體（在轉換到當前元素的字號后）的A和D使用該字體OS/2表格中的“sTypeAscender”和“sTypeDescender”特性。如果沒有這些特性，則使用HHEA表中的“Ascent”和“Descent”特性。

line-height

于內容由行內級元素組成的塊容器元素而言，line-height 指定該元素內行盒的最小高度。此最小高度包括了基線之上的最小高度和之下的最小深度，就如同每個行盒以一個具有該元素字體和行高屬性的零寬度行內盒開始一樣。我們稱此虛構盒為“支柱 Strut ”。（該命名靈感源于Tex。）

字體在基線之上和之下的高度和深度被假定為包含在字體內的特性。（更多細節(jié)，參見CSS3。）

于不可替換行內元素而言，line-height 指定用于計算行盒高度的高度。

本屬性的值具有如下意義：

normal:

讓用戶代理設使用值為一個基于元素字體的“合理”值。該值與< number >意義相同。我們推薦 normal 的使用值在1.0到1.2之間。計算值為 normal。

< length >

指定長度用于行盒高度計算。負值非法。

< number >

本屬性的使用值為此數(shù)值乘以本元素的字號。負值非法。計算值于指定值相同。

< percentage >

本屬性的計算值為此百分比乘以元素的字號計算值。負值非法。

下面例子中的三條規(guī)則的行高結果相同：

div { line-height: 1.2; font-size: 10pt }    /* number */
div { line-height: 1.2em; font-size: 10pt }    /* length */
div { line-height: 120%; font-size: 10pt }    /* percentage */

當一個元素包含渲染不只一種字體的文本時，用戶代理應根據(jù)最大字號來決定 normal 的 line-height 值。

注意。如一個塊容器盒中的所有行內盒僅有一個共同 line-height 值并且所有行內盒字體相同（并且行內盒中不存在可替換元素、行內塊元素等），上述將確保相鄰行的基線正好相隔 line-height。這在不同字體的文本列必須對齊時十分重要，比如在表格中。

vertical-align

此屬性影響行內級元素生成盒在行盒內的垂直定位。

注意。本屬性的值在表格的上下文中有不同含義。請查閱表格高度算法一節(jié)了解詳情。

下述值僅相對于父行內元素或父塊容器元素的支柱 Strut 有意義。

在接下來的定義中，對行內不可替換元素而言，用于對齊的盒是高度為 line-height 的盒（包括了盒的字符以及兩側的半行距，參見上面）。對于其他所有元素，用于對齊的盒是外邊距盒。

baseline

把盒的基線同父盒的基線對齊。如果盒沒有基線，對齊盒的下外邊距邊緣與父盒的基線。

middle

把盒的垂直中點同父盒的基線加上父盒一半的 x-height 對齊。

sub

把盒的基線降到父盒的下標的適當位置。（此值對元素的文本字號無影響。）

super

把盒的基線升到父盒的上標的適當位置。（此值對元素的文本字號無影響。）

text-top

把盒的頂部同父盒的內容區(qū)域（參見10.6.1）頂部對齊。

text-bottom

把盒的底部同父盒的內容區(qū)域（參見10.6.1）底部對齊。

< percentage >

把盒提升（正值）或降低（負值）此距離（line-height 值的百分比）。0% 意味著同 baseline 一樣。

< length >

把盒提升（正值）或降低（負值）此距離。0cm 意味著同 baseline 一樣。

下面的值使元素相對于行盒對齊。由于元素可能有子元素相對于它對齊（子元素又可能相對它們自己的后代對齊），下面的值使用對齊子樹 Aligned Subtree 的邊界。一個行內元素的對齊子樹包括該元素以及 vertical-align 值不為 top 或 bottom 的所有子行內元素的所有對齊子樹。該對齊子樹的頂部是子樹內最高的盒頂部，底邊也是類似這樣。

top

把對齊了的子樹頂部同行盒頂部對齊。

bottom

把對齊了的子樹底部同行盒底部對齊。

行內表格的基線為表格首行的基線。

行內塊的基線為其文檔流內最后一個行盒的基線，除非該行內塊沒有文檔流內行盒或者其 overflow 屬性計算值不為 visible，這種情況下基線為下外邊距邊緣。