CSS規範 > 10 視覺格式化模型詳述 Visual Formatting Model Details

時間 2019-11-08

標籤 css 規範視覺格式化模型詳述 visual formatting model details 欄目 CSS 简体版

原文原文鏈接

2015/10/08：原「10.8標題行盒高度計算」改成「10.8 行高計算」。英文原文爲「line height」。因爲翻譯時候看到那段結論是行盒的高度，腦抽就把本來翻譯對的標題改了下，剛回顧一番深覺不妥，故改回來。html

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

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

10.1 「包含塊」的定義

元素的盒的位置和大小有時會根據某一矩形來計算，該矩形被稱爲該元素的包含塊。一個元素的包含塊定義以下：佈局

根元素所在的包含塊是一個被稱爲初始包含塊 Initial Containing Block 的矩形，在連續媒體中，其尺寸爲視口大小，其基點爲畫布原點。在分頁媒體中，初始包含塊即爲頁面區域 Page Area。初始包含塊的 direction 屬性與根元素的一致。學習
對於其餘元素而言，若是元素 position 爲 relative 或 static，其包含塊爲最近的塊容器祖先盒的內容邊緣。字體
若是元素有 position: fixed，其包含塊由連續媒體中的視口或分頁媒體中的頁面區域建立。spa
若是元素有 position: absolute，在如下狀況下，其包含塊由 position 值爲 absolute，relative，fixed 的最近祖先建立：翻譯
1. 若是該祖先元素爲行內元素，包含塊即圍繞着爲該元素生成的第一個和最後一個行內盒的內邊距盒的邊界盒。在CSS2.1中，若是該行內元素分跨多行，則包含塊未定義。設計
2. 不然，包含塊由該祖先元素的內邊距邊緣構成。代理
  
  若是沒有這樣的祖先元素，包含塊即初始包含塊。

在分頁媒體中，一個絕對定位元素相對於其包含塊定位，並忽略全部的換頁（如同文檔是連續的）。該元素可能隨後被打斷而分佈在幾個頁面之中。

對於絕對定位內容，若是解析爲頁面上的一個位置而不是正在佈局的頁面（當前頁面），或解析爲已經爲打印而渲染出來的當前頁面的一個位置，打印機可能將該內容放置於：

當前頁的其餘位置
下一頁，或者
省略該內容

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>Illustration of containing blocks</title>
</head>
<body id="body">
  <div id="div1">
    <p id="p1">This is text in the first paragraph...</p>
    <p id="p2">This is text <em id="em1"> in the 
    <strong id="strong1">second</strong> paragraph.</em></p>
  </div>
</body>
</html>

的包含塊以下創建：

生成盒子的元素 => 生成包含塊的元素
html => 初始包含塊（依賴於用戶代理）
body => html
div1 => body
p1 => div1
p2 => div1
em1 => p2
strong1 => p2

若是咱們給 div1 定位：

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

其包含塊就再也不是 body 了；包含塊如今成了初始包含塊（由於沒有別的定位了的祖先盒）。

若是咱們一樣給 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 生成的盒）。

10.2 內容寬度：`width` 屬性

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

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

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

屬性值有以下意義：

長度 <length>

指定一個長度單位的內容區域寬度。

百分比 <percentage>

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

auto

寬度取決於其餘屬性。參見下文。

負值的 width 非法。

例如，下面的規則將段落的內容寬度改爲100像素。

p { width: 100px }

10.3 計算寬度和外邊距

元素用於佈局的 width、margin-left、margin-right、left 以及 right 屬性，其值取決於生成盒的類型以及屬性彼此。（佈局所採用的值有時被稱爲使用值）。基本上，使用值同計算值一致，是把計算值 auto 替換爲某些適當值，而百分比根據包含塊計算，但也有例外。須要辨析下列情形：

行內不可替換元素
行內可替換元素
常規流中塊級不可替換元素
常規流中塊級可替換元素
浮動不可替換元素
浮動可替換元素
絕對定位不可替換元素
絕對定位可替換元素
常規流中行內塊不可替換元素
10. 常規流中行內塊可替換元素

1-6點和9-10點中，相對定位元素的 left 和 right 值根據9.4.3章節規則計算。

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

10.3.1 行內不可替換元素

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

10.3.2 行內可替換元素

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

若是 height 和 width 計算值均爲 auto而且該元素有固有寬度，那麼固有寬度即 width 的使用值。

若是 height 和 width 計算值均爲 auto而且該元素沒有固有寬度，但有固有高度和固有比例；或者若是 width 計算值爲 auto，height 有其餘計算值，而且元素有固有比例；那麼 width 的使用值爲：

高度使用值 * 固有比例

若是 height 和 width 計算值均爲 auto而且該元素有固有比例，但沒有固有高度或固有寬度，那麼CSS2.1中 width 的該使用值未定義。然而建議是，若是包含塊的寬度自己不依賴於該可替換元素的寬度，那麼 width 的使用值根據常規流中塊級不可替換元素的約束方程式來計算。

不然，若是 width 有計算值 auto，而且元素有固有寬度，那麼固有寬度即 width 使用值。

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

10.3.3 常規流中塊級不可替換元素

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

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）比包含塊的寬度還要寬，那麼如下規則中 margin-left 和 margin-right 的任何 auto 值都被視爲零。

若是以上全部屬性的計算值都不爲 auto，則這些值被稱爲「過分約束」，且其中一個使用值必須同其計算值不一樣。若是包含塊的 direction 屬性值爲 ltr，則忽略 margin-right 的指定值，其值計算成使得等式成立的值。若是 direction 屬性值爲 rtl，則更改 margin-left。

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

若是其中正好僅一個值指定爲 auto，則該值由等式計算得出。

若是 width 設爲 auto，那麼其餘任何 auto 值變爲 0 而且 width 由等式計算得出。

若是 margin-left 和 margin-right 均爲 auto，其使用值相等。將根據包含塊的邊緣水平居中該元素。

10.3.4 常規流中塊級可替換元素

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

10.3.5 浮動不可替換元素

若是 margin-left 或 margin-right 計算爲 auto，則使用值爲 0。

若是 width 計算爲 auto，則使用值爲「收縮適應」寬度。

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

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

10.3.6 浮動可替換元素

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

10.3.7 絕對定位不可替換元素

爲講述本節和下節，術語（一個元素的）「靜態位置」粗略指的是假設元素在常規流中的位置。精確地講：

靜態位置包含塊 Static-position Containing Block 是假定元素 position 指定值爲 static 且 float 爲 none 時，元素的第一個盒的包含塊。（注意因爲9.7節的規則，假定計算可能要求假定一個不一樣的 display 計算值）。
left 的靜態位置是從包含塊的左邊緣到假定元素 position 值爲 static 且 float 值爲 none 時，成爲其第一個盒的假定盒的左外邊距邊緣的距離。若是假定盒在包含塊左邊，該值爲負。
right 的靜態位置是從包含塊的右邊緣到上述假定盒的右外邊距邊緣的距離。若是假定盒在包含塊左側，該值爲正。

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

爲計算靜態位置，固定定位元素的包含塊是初始包含塊而非視口，而且全部可滾動盒應被假定爲滾動到其原位。

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

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。接着，若是創建靜態位置包含塊的元素的 direction 屬性爲 ltr，則設 left 爲靜態位置並應用下述的第三條規則；不然，設置 right 並應用第一條規則。

若是三者均不爲 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，並採起如下六條適用規則之一。

left 和 width 爲 auto 且 right 不爲 auto，則 width 收縮適應。接着計算 left。
left 和 right 爲 auto 且 width 不爲 auto，若是創建靜態位置包含塊的元素的 direction 屬性爲 lrt 則設 left 爲靜態位置，不然設置 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沒有規定確切算法。接着，找到可用寬度：經過設定 left（第一種狀況）或者 right（第三種狀況）爲0後計算寬度。

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

10.3.8 絕對定位可替換元素

這種狀況下，10.3.7節中直到約束方程式都適用，但該節接下來的部分由如下規則替代：

width 的使用值計算同行內可替換元素。若是 margin-left 或 margin-right 指定爲 auto，使用值取決於下述規則。
left 和 right 的值都爲 auto 狀況下，若是創建靜態位置包含塊的元素的 direction 屬性爲 ltr，將 left 設爲靜態位置，而若是 direction 爲 ltr，設 right 爲靜態位置。
若是 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狀況下）並從新計算此值。

10.3.9 常規流內行內塊不可替換元素

若是 width 爲 auto，使用值爲收縮適應寬度，同浮動元素。

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

10.3.10 常規流內行內塊可替換元素

同行內可替換元素。

10.4 最小和最大寬度

譯者注：暫省

10.5 內容高度

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

注意：絕對定位元素的包含塊的高度與絕對定位元素自己無關，所以這種元素的百分比高度老是能夠解出。然而，該高度可能直到文檔中後面的元素全被處理後才知道。

負值非法。

10.6 計算高度和外邊距

爲計算 top，margin-top，height，margin-bottom 和 bottom，須在不一樣盒中做如下區分：

行內不可替換元素
行內可替換元素
常規流內塊級不可替換元素
常規流內塊級可替換元素
浮動不可替換元素
浮動可替換元素
絕對定位不可替換元素
絕對定位可替換元素
常規流內行內塊不可替換元素
10. 常規流內行內塊可替換元素

1-6 和 9-10 點中，top 和 bottom 的使用值取決於9.4.3節的規則。

注意：這些規則同適用其餘任何元素同樣適用於根元素。

注意：下面計算出的 height 的使用值不必定是最終結果，且視 min-height 和 max-height 可能重複計算屢次，參見下面「最小和最大高度」。

10.6.1 行內不可替換元素

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

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

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

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

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

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

10.6.2 行內可替換元素，文檔流內塊級可替換元素，文檔流內行內塊可替換元素以及浮動可替換元素

若是 margin-top 或者 margin-bottom 爲 auto，其使用值爲0。

若是 height 和 width 計算值均爲 auto 且該元素有固有高度，那麼該固有高度爲 height 使用值。

不然，若是 height 計算值爲 auto，且該元素有一個固有比例，則 height 的使用值爲：

width 使用值 / 固有比例

不然，若是 height 計算值爲 auto，且該元素有固有高度，那麼該固有高度爲 height 使用值。

不然，若是 height 計算值爲 auto，但以上狀況均不符合，那麼 height 的使用值必須設定爲一個最大矩形的高度，該矩形比例爲2:1，高度不超過150px，且寬度不大於設備寬度。

10.6.3 `overflow` 計算爲 `visible` 時的文檔流內塊級不可替換元素

本節一樣適用於 overflow 計算值非 visible 但已經傳播到視口的文檔流內塊級不可替換元素。

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

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

其最後一個行盒的下邊緣，若是該盒創建了一個包含一行或多行的行內格式化上下文
其最後一個文檔流內子元素的下（可能摺疊）外邊距的下邊緣，若是該子元素的下外邊距沒有同該元素的下外邊距摺疊
其最後一個文檔流內子元素的下邊框邊緣，若是該子元素的上外邊距沒有同該元素的上外邊距摺疊
不然零

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

10.6.4 絕對定位不可替換元素

爲講述本節和下節，術語（一個元素的）「靜態位置」粗略指的是元素在常規流中的位置。精確地講，top 的靜態位置是從包含塊的上邊緣到假設元素 position 值爲 static，float 爲 none，clear 爲 none 時，做爲該元素的首個盒的假定盒的上外邊距邊緣的距離。（注意因爲9.7節的規則，假定計算可能要求假定一個不一樣的 display 計算值）。

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

爲計算靜態位置，固定定位元素的包含塊是初始包含塊而非視口。

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

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

若是 top、height 和 bottom 均爲 auto，設 top 爲靜態位置，並應用下面第三條規則：

若是三者均不爲 auto：若是 margin-top 和 margin-bottom 爲 auto，在兩個外邊距值相等的這一額外約束條件下計算方程式。若是 margin-top 和 margin-bottom 之一爲 auto，計算等式求其值。若是二值過分約束，忽略 bottom 值並從新計算此值。

不然，採起如下六條適用規則之一。

top 和 height 爲 auto 且 bottom 不爲 auto，則 height 在10.6.7基礎上，設值爲 auto 的 margin-top 和 margin-bottom 爲0，並計算 top。
top 和 bottom 爲 auto 且 height 不爲 auto，則設 top 爲靜態位置，設值爲 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。

10.6.5 絕對定位可替換元素

除了元素有固有高度外，其餘情形同上節類似。替代序列現爲：

height 的使用值同行內可替換元素計算。若是 margin-top 或 margin-bottom 指定值爲 auto，其使用值由下述規則決定。
若是 top 和 bottom 均爲 auto，使用元素的靜態位置替換 top。
若是 bottom 爲 auto，值爲 auto 的 margin-top 或 margin-bottom 替換爲0。
若是此時 margin-top 和 margin-bottom 仍爲 auto，在兩個外邊距必須取等值這一額外約束條件下計算方程式。
若是此時只剩一個 auto，運算方程式求值。
若是此時二值過分約束，忽略 bottom 值並從新計算此值。

10.6.6 複雜情形

本節適用於：

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

若是 margin-top 或者 margin-bottom 爲 auto，其使用值爲0。若是 height 爲 auto，則該高度取決於10.6.7節中元素的後代。

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

10.6.7 塊格式化上下文根的 `auto` 高度

某些狀況下（參見，如，上面的10.6.4和10.6.6節），創建塊格式化上下文的元素的高度按以下所述計算：

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

若是該元素有塊級子元素，其高度爲最上塊級子盒的上外邊距邊緣到最下塊級子盒的下外邊距邊緣的距離。

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

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

10.7 最小和最大高度

譯者注：暫省

10.8 行高計算

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

計算行盒內每一個行內級盒的高度。對於可替換元素、行內塊元素以及行內表格元素，高度是其外邊距盒的高度；對於行內盒，高度是其 line-height。（參見「計算高度和外邊距」以及「行距和半行距」中的行內盒高度。）
行內級盒根據其 vertical-align 屬性垂直對齊。若是它們對齊 top 或 bottom，它們必須以能最小化行盒高度的方式對齊。若是這些盒足夠高，則有多種解決方案而且CSS2.1沒有規定此行盒的基線的位置（即，支柱 Strut 位置，參見下面）。
行盒高度是最上盒頂部到最下盒底部的距離。（包括支柱，解釋參見下述 line-height。）

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

10.8.1 行距和半行距

CSS 假設每種字體都由字體特性來指定一個基線之上的特性高度和之下的特性深度。本節中咱們用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沒有定義什麼是行內盒的內容區域（參加上面的10.6.1）所以不一樣的用戶代理可能把背景和顏色繪製在不一樣地方。

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

line-height

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

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

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

本屬性的值具備以下意義：

normal:

讓用戶代理設使用值爲一個基於元素字體的「合理」值。該值與< number >意義相同。咱們推薦 normal 的使用值在1.0到1.2之間。計算值爲 normal。

< length >

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

< number >

本屬性的使用值爲此數值乘以本元素的字號。負值非法。計算值於指定值相同。

< percentage >

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

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

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

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

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

vertical-align

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

注意。本屬性的值在表格的上下文中有不一樣含義。請查閱表格高度算法一節瞭解詳情。

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

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

baseline

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

middle

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

sub

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

super

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

text-top

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

text-bottom

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

< percentage >

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

< length >

把盒提高（正值）或下降（負值）此距離。0cm 意味着同 baseline 同樣。

下面的值使元素相對於行盒對齊。因爲元素可能有子元素相對於它對齊（子元素又可能相對它們本身的後代對齊），下面的值使用對齊子樹 Aligned Subtree 的邊界。一個行內元素的對齊子樹包括該元素以及 vertical-align 值不爲 top 或 bottom 的全部子行內元素的全部對齊子樹。該對齊子樹的頂部是子樹內最高的盒頂部，底邊也是相似這樣。

top

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

bottom

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

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

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