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

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

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

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

元素的盒的位置和大小有時(shí)會(huì)根據(jù)某一矩形來(lái)計(jì)算，該矩形被稱(chēng)為該元素的包含塊。一個(gè)元素的包含塊定義如下：

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

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

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

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

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

否則，包含塊由該祖先元素的內(nèi)邊距邊緣構(gòu)成。

如果沒(méi)有這樣的祖先元素，包含塊即初始包含塊。

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

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

當(dāng)前頁(yè)的其他位置

下一頁(yè)，或者

省略該內(nèi)容

注意：一個(gè)分布在多頁(yè)的塊級(jí)元素在每頁(yè)的寬度可能不同，并且可能會(huì)存在設(shè)備特定限制。

在沒(méi)有定位的情況下，下面文檔：

    


  

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

的包含塊如下建立：

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

html => 初始包含塊（依賴(lài)于用戶(hù)代理）

body => html

div1 => body

p1 => div1

p2 => div1

em1 => p2

strong1 => p2

如果我們給 div1 定位：

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

其包含塊就不再是 body 了；包含塊現(xiàn)在成了初始包含塊（因?yàn)闆](méi)有別的定位了的祖先盒）。

如果我們同樣給 em1 定位：

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

生成盒表格變成了：

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

html => 初始包含塊（依賴(lài)于用戶(hù)代理）

body => html

div1 => 初始包含塊

p1 => div1

p2 => div1

em1 => div1

strong1 => em1

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

譯者注：屬性介紹略，可查CSS手冊(cè)

該屬性指定盒的內(nèi)容寬度。

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

屬性值有如下意義：

長(zhǎng)度

指定一個(gè)長(zhǎng)度單位的內(nèi)容區(qū)域?qū)挾取?/p>

百分比

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

auto

寬度取決于其他屬性。參見(jiàn)下文。

負(fù)值的 width 非法。

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

p { width: 100px }

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

行內(nèi)不可替換元素

行內(nèi)可替換元素

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

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

浮動(dòng)不可替換元素

浮動(dòng)可替換元素

絕對(duì)定位不可替換元素

絕對(duì)定位可替換元素

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

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

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

width 值無(wú)效。margin-left 和 margin-right 的 auto 計(jì)算值轉(zhuǎn)換為使用值 0。

margin-left 和 margin-right 的 auto 計(jì)算值轉(zhuǎn)換為使用值 0。

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

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

高度使用值 * 固有比例

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

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

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

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

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 值都被視為零。

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

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

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

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

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

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

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

如果 width 計(jì)算為 auto，則使用值為“收縮適應(yīng)”寬度。

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

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

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

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

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

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

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

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

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

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

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 的設(shè)為0。接著，如果建立靜態(tài)位置包含塊的元素的 direction 屬性為 ltr，則設(shè) left 為靜態(tài)位置并應(yīng)用下述的第三條規(guī)則；否則，設(shè)置 right 并應(yīng)用第一條規(guī)則。

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

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

left 和 width 為 auto 且 right 不為 auto，則 width 收縮適應(yīng)。接著計(jì)算 left。

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

width 和 right 為 auto 且 left 不為 auto，則 with 收縮適應(yīng)。接著計(jì)算 right。

left 為 auto，width 和 right 不為 auto，計(jì)算 left。

width 為 auto，left 和 right 不為 auto，計(jì)算 width。

right 為 auto，left 和 width 不為 auto，計(jì)算 right。

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

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

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

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

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

如果 left 或 right 為 auto，設(shè) auto 的 margin-left 和 margin-right 為0。

如果這時(shí)候 margin-left 和 margin-right 還是 auto，在兩個(gè)外邊距值必須相等的這一額外約束條件下計(jì)算方程式，當(dāng)計(jì)算結(jié)果為負(fù)時(shí)，如果包含塊的 direction 為 ltr（rtl），設(shè)置 margin-left（margin-right）為零并計(jì)算 margin-right（margin-left）。

如果這時(shí)候剩下一個(gè) auto，運(yùn)算方程式得到該值。

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

如果 width 為 auto，使用值為收縮適應(yīng)寬度，同浮動(dòng)元素。

計(jì)算值為 auto 的 margin-left 或 margin-right 使用值為0。

同行內(nèi)可替換元素。

譯者注：暫省

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

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

負(fù)值非法。

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

行內(nèi)不可替換元素

行內(nèi)可替換元素

常規(guī)流內(nèi)塊級(jí)不可替換元素

常規(guī)流內(nèi)塊級(jí)可替換元素

浮動(dòng)不可替換元素

浮動(dòng)可替換元素

絕對(duì)定位不可替換元素

絕對(duì)定位可替換元素

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

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

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

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

圖片來(lái)源：http://blog.justfont.com/

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

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

注意：CSS3可能將引入一個(gè)屬性來(lái)選擇為內(nèi)容高度使用哪種字體方案。

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

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

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

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

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

width 使用值 / 固有比例

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

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

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

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

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

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

其最后一個(gè)文檔流內(nèi)子元素的下（可能折疊）外邊距的下邊緣，如果該子元素的下外邊距沒(méi)有同該元素的下外邊距折疊

其最后一個(gè)文檔流內(nèi)子元素的下邊框邊緣，如果該子元素的上外邊距沒(méi)有同該元素的上外邊距折疊

否則零

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

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

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

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

絕對(duì)定位不可替換元素的垂直尺寸使用值必須滿(mǎn)足如下約束：

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

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

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

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

top 和 height 為 auto 且 bottom 不為 auto，則 height 在10.6.7基礎(chǔ)上，設(shè)值為 auto 的 margin-top 和 margin-bottom 為0，并計(jì)算 top。

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

height 和 bottom 為 auto 且 top 不為 auto，則 height 在10.6.7基礎(chǔ)上，設(shè)值為 auto 的 margin-top 和 margin-bottom 為0，并計(jì)算 bottom。

top 為 auto，height 和 bottom 不為 auto，則設(shè)值為 auto 的 margin-top 和 margin-bottom 為0，并計(jì)算 top。

height 為 auto，top 和 bottom 不為 auto，則設(shè)值為 auto 的 margin-top 和 margin-bottom 為0，并計(jì)算 height。

bottom 為 auto，top 和 height 不為 auto，則設(shè)值為 auto 的 margin-top 和 margin-bottom 為0，并計(jì)算 bottom。

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

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

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

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

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

如果此時(shí)只剩一個(gè) auto，運(yùn)算方程式求值。

如果此時(shí)二值過(guò)度約束，忽略 bottom 值并重新計(jì)算此值。

本節(jié)適用于：

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

行內(nèi)塊不可替換元素

浮動(dòng)不可替換元素

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

對(duì)于行內(nèi)塊元素，其外邊距盒納入其行盒高度的計(jì)算。

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

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

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

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

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

譯者注：暫省

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

計(jì)算行盒內(nèi)每個(gè)行內(nèi)級(jí)盒的高度。對(duì)于可替換元素、行內(nèi)塊元素以及行內(nèi)表格元素，高度是其外邊距盒的高度；對(duì)于行內(nèi)盒，高度是其 line-height。（參見(jiàn)“計(jì)算高度和外邊距”以及“行距和半行距”中的行內(nèi)盒高度。）

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

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

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

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

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

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

注意。L可能為負(fù)。

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

盡管不可替換元素的外邊距、邊框以及內(nèi)邊距不納入行盒的計(jì)算，它們?nèi)匀讳秩驹谛袃?nèi)盒的周?chē)＿@意味著如果 line-height 指定的高度小于被包含盒的內(nèi)容高度，內(nèi)邊距和邊框的背景和顏色可能“流進(jìn)”毗鄰的行盒。用戶(hù)代理應(yīng)當(dāng)按文檔順序渲染這些盒。這會(huì)造成后面的盒的邊框繪制在前面盒的邊框和文本上。

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

注意。推薦OpenType和TrueType字體（在轉(zhuǎn)換到當(dāng)前元素的字號(hào)后）的A和D使用該字體OS/2表格中的“sTypeAscender”和“sTypeDescender”特性。如果沒(méi)有這些特性，則使用HHEA表中的“Ascent”和“Descent”特性。

line-height

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

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

于不可替換行內(nèi)元素而言，line-height 指定用于計(jì)算行盒高度的高度。

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

normal:

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

< length >

指定長(zhǎng)度用于行盒高度計(jì)算。負(fù)值非法。

< number >

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

< percentage >

本屬性的計(jì)算值為此百分比乘以元素的字號(hào)計(jì)算值。負(fù)值非法。

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

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 */

當(dāng)一個(gè)元素包含渲染不只一種字體的文本時(shí)，用戶(hù)代理應(yīng)根據(jù)最大字號(hào)來(lái)決定 normal 的 line-height 值。

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

vertical-align

此屬性影響行內(nèi)級(jí)元素生成盒在行盒內(nèi)的垂直定位。

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

下述值僅相對(duì)于父行內(nèi)元素或父塊容器元素的支柱 Strut 有意義。

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

baseline

把盒的基線(xiàn)同父盒的基線(xiàn)對(duì)齊。如果盒沒(méi)有基線(xiàn)，對(duì)齊盒的下外邊距邊緣與父盒的基線(xiàn)。

middle

把盒的垂直中點(diǎn)同父盒的基線(xiàn)加上父盒一半的 x-height 對(duì)齊。

sub

把盒的基線(xiàn)降到父盒的下標(biāo)的適當(dāng)位置。（此值對(duì)元素的文本字號(hào)無(wú)影響。）

super

把盒的基線(xiàn)升到父盒的上標(biāo)的適當(dāng)位置。（此值對(duì)元素的文本字號(hào)無(wú)影響。）

text-top

把盒的頂部同父盒的內(nèi)容區(qū)域（參見(jiàn)10.6.1）頂部對(duì)齊。

text-bottom

把盒的底部同父盒的內(nèi)容區(qū)域（參見(jiàn)10.6.1）底部對(duì)齊。

< percentage >

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

< length >

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

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

top

把對(duì)齊了的子樹(shù)頂部同行盒頂部對(duì)齊。

bottom

把對(duì)齊了的子樹(shù)底部同行盒底部對(duì)齊。

行內(nèi)表格的基線(xiàn)為表格首行的基線(xiàn)。

行內(nèi)塊的基線(xiàn)為其文檔流內(nèi)最后一個(gè)行盒的基線(xiàn)，除非該行內(nèi)塊沒(méi)有文檔流內(nèi)行盒或者其 overflow 屬性計(jì)算值不為 visible，這種情況下基線(xiàn)為下外邊距邊緣。