Warning:
This wiki has been archived and is now read-only.
CSS2/visudet
視覺布局模型細節
内容概要
- 10.1 包含块的定义
- 10.2 內容寬度 ― 'width' 屬性
- 10.3 計算寬度與邊界
- 10.3.1 行內非置換元素
- 10.3.2 行內置換元素
- 10.3.3 常規流中的塊級非置換元素
- 10.3.4 常規流中的塊級置換元素
- 10.3.5 浮動非置換元素
- 10.3.6 浮動置換元素
- 10.3.7 絕對定位非置換元素
- 10.3.8 絕對定位置換元素
- 10.3.9 常規流中的 'inline-block' 非置換元素
- 10.3.10 常規流中的 'inline-block' 置換元素
- 10.4 寬度最小值與最大值 ― 'min-width' 與 'max-width' 屬性
- 10.5 內容高度 ― 'height' 屬性
- 10.6 計算高度與邊界
- 10.6.1 行內非置換元素
- 10.6.2 行內置換元素、常規流中的塊級置換元素與浮動置換元素
- 10.6.3 常規流中 'overflow' 的計算值為 'visible' 的塊級非置換元素
- 10.6.4 絕對定位非置換元素
- 10.6.5 絕對定位置換元素
- 10.6.6 複雜情形
- 10.6.7 塊格式化上下文根的 'auto' 高度
- 10.7 高度最小值與最大值 ― 'min-height' 與 'max-height' 屬性
- 10.8 行高計算 ― 'line-height' 與 'vertical-align' 屬性
包含块的定义
一个元素的框的尺寸和位置的计算有时相对于某个特定的长方形，称为该元素的包含块。一个元素的包含块的定义如下:
- 在根元素存在的包含块是一个矩形称作初始包含块.对于连续媒体,它具有视口的尺寸并且其锚在canvas的原点;它是分页媒体的页面区域.初始包含块的'direction'属性和根元素一样Error creating thumbnail: Unable to save thumbnail to destination.
- 对于其它元素,如果元素的位置是'relative' 或者 'static',包含块由最近的块容器的祖先盒子Error creating thumbnail: Unable to save thumbnail to destination的内容边界形成.
- 如果元素设置了'position: fixed'，在连续媒体或者页面区域在分页媒体这两种情况下包含块由视口创建Error creating thumbnail: Unable to save thumbnail to destination.
-
如果元素设置了'position: absolute',包含块由最近'position'是'absolute', 'relative' 或者 'fixed'的祖先
Error creating thumbnail: Unable to save thumbnail to destination创建,方式如下:- 在祖先是行内元素的情况下,包含块是绕着第一个和最后一个行内盒子的padding盒子的(为该元素生成的)边界盒.在CSS 2.1中,如果行内元素分跨多行,包含块是未定义的.
- 否则, 由祖先的填充边缘形成.
如果没有该祖先,包含块是初始包含块.
在分页媒体,一个绝对的定位元素的定位相对于它的包含块忽略任何页面中断符(好像文档是连续的).该元素可能随后打断几个页面.
对于绝对定位内容处理一个页面的定位不同与页面进行布局(当前页面),或者处理一个当前页面的位置其已经为打印渲染完成,打印机可能放置该内容
- 在当前页面的另一个位置,
- 在随后的页面,或者
- 可能忽略它.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>包含塊的闡釋</TITLE>
</HEAD>
<BODY id="body">
<DIV id="div1">
<P id="p1">這是第一個段落裡的字…</P>
<P id="p2">這是<EM id="em1">第
<STRONG id="strong1">二</STRONG>個段落裡</EM>的字。</P>
</DIV>
</BODY>
</HTML>
由以下方式建立：
| 由元素 X 生成的盒 | 的包含塊由元素 Y 建立 |
|---|---|
| html | 初始 C.B. |
| body | html |
| div1 | body |
| p1 | div1 |
| p2 | div1 |
| em1 | p2 |
| strong1 | p2 |
如果我們給 "div1" 定位：
#div1 { position: absolute; left: 50px; top: 50px }
則其包含塊不再是 "body" ― 變成初始包含塊（因為沒有其他的定位祖先盒）。
如果我們也給 "em1" 定位：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }
則包含塊的對應表變成：
| 由元素 X 生成的盒 | 的包含塊由元素 Y 建立 |
|---|---|
| html | 初始 C.B. Error creating thumbnail: Unable to save thumbnail to destination |
| body | html |
| div1 | 初始 C.B. |
| p1 | div1 |
| p2 | div1 |
| em1 | div1 |
| strong1 | em1 |
內容寬度 ― 'width' 屬性
'width'
| 取值： | <length> | <percentage> | auto | inherit |
| 初始： | auto |
| 適用於： | 除了非置換行內元素、表格行、行群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 相對於包含塊的寬度 |
| 媒介： | 視覺 |
| 計算值： | 同指定的百比比值或 'auto' ，不然就是絕對長度。 |
本屬性可以用來指定盒的內容寬度。
本屬性不適用於非置換行內元素。非置換行內元素的盒的內容寬度是盒裡面會進行渲染的內容的寬度（在子盒進行任何的相對偏移「之前」）各取值的意義如下：
auto
負值在 'width' 上不合法。
p { width: 100px } 計算寬度與邊界
一個元素用來布局的 'width'、'margin-left'、'margin-right'、'left'、'right' 屬性值取決於生成的盒種類，也取決於彼此。（布局用的值有時候也叫做使用值。）原理上，使用值是把計算值的 'auto' 取代成適合的值，並以包含塊計算百分比值，不過也有例外。以下狀況必須分開討論
：
- 行內非置換元素
- 行內置換元素
- 常規流中的塊級非置換元素
- 常規流中的塊級置換元素
- 浮動非置換元素
- 浮動置換元素
- 絕對定位非置換元素
- 絕對定位置換元素
- 常規流中的 'inline-block' 非置換元素
- 常規流中的 'inline-block' 置換元素
對於情況 1-6 與 9-10 的相對定為元素，'left' 與 'right' 的值由 9.4.3 小節的規則決定。
行內非置換元素
'width' 屬性不適用。若 'margin-left' 或 'margin-right' 的計算值為 'auto'，則其使用值為 '0'。
行內置換元素
若 'margin-left' 或 'margin-right' 的計算值為 'auto'，則其使用值為 '0'
若 'height' 與 'width' 的計算值皆為 'auto' 且元素有固有寬度，則 'width' 的使用值為該固有寬度。
若以下條件之一發生 1) 'height' 與 'width' 的計算值皆為 'auto' 且元素有沒有固有寬度，但是有固有高度與固有長寬比。2) 若 'width' 的計算值為 'auto' 且 'height' 有別的計算值，而且元素具有固有長寬比。則，'width' 的使用值為：
若 'height' 與 'width' 的計算值皆為 'auto' 且元素具有固有長寬比但是沒有固有高度或寬度，則 CSS 2.1 未定義 'width' 的使用值。然而，本規範建議若包含塊的寬度本身與置換元素的寬度無關，則使用者代理該用對於常規流中的塊級非置換元素的公式計算 'width' 的使用值。
否則，若 'width' 的計算值為 'auto' 且元素具有固有寬度，則 'width' 的使用值為該固有寬度。
否則，若 'width' 的計算值為 'auto' 且上述條件完全不符，則 'width' 的使用值為 300px。若 300px 對裝置太寬，則使用者代理應該使用能夠嵌進設備的最大的 2:1 比例的長方形的寬作為 'width' 的使用值。
常規流中的塊級非置換元素
以下拘束必須在這些屬性的使用值中成立：
若 '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' 上發生。
若恰好只有一個值被指定為 'auto'，則該使用值由等式求出若 'width' 設為 'auto'，則其他 'auto' 值變成 '0' 且 'width' 由等式求出。
若 'margin-left' 與 'margin-right' 都是 'auto'，則他們的使用值相等。這會將元素水平置中在包含塊的邊之間。
常規流中的塊級置換元素
'width' 的使用值照行內置換元素的方式決定。然後使用塊級非置換元素的規則決定邊界。
浮動非置換元素
若 'margin-left' 或 'margin-right' 的計算值為 'auto'，則其使用值為 '0'。
若 'width' 的計算值為 'auto'，則使用值為「收縮適應寬度」。
收縮適應寬度的計算與使用自動表格布局演算法理表格單元寬度的計算類似。粗略說法：先以「不在直接斷行以外的地方斷行」的方式排版內容，將此寬度定義為首選寬度，再使用所有可能的斷行以計算首選「最小」寬度浮動置換元素
若 'margin-left' 或 'margin-right' 的計算值為 'auto'，則其使用值為 '0'。'width' 的使用值照行內置換元素的方式決定。
絕對定位非置換元素
在本小節與下一小節中，術語（一個元素的）「靜態位置」大約是指元素在常規流的時候會在的位置。更精確的說：
- 靜態位置包含塊是假設元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的時候的第一個盒Error creating thumbnail: Unable to save thumbnail to destination的包含塊。（請注音因為有 9.7 小節的規則，這個假設性的計算可能也會讓假想盒 'display' 的計算值有所不同。）
- 'left' 的靜態位置是包含塊的左邊到假設元素 'position' 的指定值是 'static' 且 'float' 的指定值是 'none' 的時候Error creating thumbnail: Unable to save thumbnail to destination的第一個盒的左邊界邊的距離。若假想盒在包含塊的左邊則此值為負。
- 'right' 的靜態位置是包含塊的右邊到上述假想盒的右邊界的距離。若假想盒在包含塊的左邊則此值為正。
使用者代理也可以用猜的決定可能的位置而不是真的計算假想盒的布局情形。
在計算靜態位置的過程中，固定定位元素的包含塊是初始包含塊而不是視口，且所有可捲動的盒都假設已捲動到原點。
決定這些屬性使用值得拘束為：
若 'left'、'width' 與 'right' 三個屬性都為 'auto'：先將 'margin-left' 與 'margin-right' 的 'auto' 值設為 '0'。再來，若建立靜態位置包含塊的元素的 'direciton' 屬性為 'ltr'，則將 'left' 設為靜態位置並使用下面的規則編號三。否則，將 'right' 設為靜態位置並使用下面的規則編號一。
若三個屬性沒有一個是 'auto'：若 'margin-left' 和 'margin-right' 都是 'auto'，以兩個邊界相等為條件解方程式，但是若這會讓邊界為負，則若包含塊的方向是 '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'，則寬度是收縮適應寬度。然後解 'left'。
- 若 'left' 與 'right' 是 'auto' 且 'width' 不是 'auto'，若建立靜態位置包含塊的元素的 'direciton' 屬性為 'ltr'，則將 'left' 設為靜態位置，否則，將 'right' 設為靜態位置。然後解出 'left'（若 'direction' 是 'rtl'）或 'right'（若 'direction' 是 'ltr'）。
- 若 'width' 與 'right' 是 'auto' 且 'left' 不是 'auto'，則寬度是收縮適應寬度。然後解 'right'。
- 若 'left' 是 'auto' 且 'width' 與 'right' 不是 'auto'，則解出 'left'。
- 若 'width' 是 'auto' 且 'left' 與 'right' 不是 'auto'，則解出 'width'。
- 若 'right' 是 'auto' 且 'left' 與 'width' 不是 'auto'，則解出 'right'。
收縮適應寬度的計算與使用自動表格布局演算法理表格單元寬度的計算類似。粗略說法：先以「不在直接斷行以外的地方斷行」的方式排版內容，將此寬度定義為首選寬度，再使用所有可能的斷行以計算首選「最小」寬度。CSS 2.1 不定義完整的演算法。再來，找到「可用寬度」：這可以在將 'left'（情況 1）或 'right' 設為 '0'（情況 3）之後，解出 'width' 而得到。
然後收縮適應寬度為：min(max(首選最小寬度, 可用寬度), 首選寬度)。
絕對定位置換元素
10.3.7 小節到拘束方程式為止（包括方程式）在這種情況下仍適用，但是 10.3.7 小節剩下的部份由下列規則取代：
- 'width' 的使用值照行內置換元素的方式決定。若 'margin-left' 或 'margin-right' 的指定值為 'auto' 則其使用值按下面規則決定。
- 若 'left' 與 'right' 的值都是 'auto'，則若建立靜態位置包含塊的元素的 'direciton' 屬性為 'ltr'，則將 'left' 設為靜態位置，否則若 'direction' 是 'rlt'，將 'right' 設為靜態位置。
- 若 'left' 或 'right' 是 'auto'，則將 'margin-left' 與 'margin-right' 的 'auto' 值以 '0' 取代。
- 在這裡若 'margin-left' 與 'margin-right' 仍都是 'auto'，以兩個邊界相等為條件解方程式，但是若這會讓邊界為負，則若包含塊的方向是 'ltr'（'rtl'），則設 'margin-left'（'margin-right'）為零並解出 'margin-right'（'margin-left'）。
- 在這裡若仍剩有一個 'auto'，以方程式解出該值。
- 在這裡若值過拘束，則忽略 'left'（在包含塊的 'direction' 屬性是 'rtl' 情形）或 'right'（'direction' 是 'ltr' 的情形）的值並解出該值。
常規流中的 'inline-block' 非置換元素
若 'width' 是 'auto'，則其使用值與浮動元素一樣是收縮適應寬度。
若 'margin-left' 或 'margin-right' 的計算值為 'auto'，則其使用值為 '0'。
常規流中的 'inline-block' 置換元素
與行內置換元素完全相同。
寬度最小值與最大值 ― 'min-width' 與 'max-width' 屬性
'min-width'
| 取值： | <length> | <percentage> | inherit |
| 初始： | 0 |
| 適用於： | 除了非置換行內元素、表格行、行群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 相對於包含塊的寬度 |
| 媒介： | 視覺 |
| 計算值： | 同指定值的百比比值或絕對長度。 |
'max-width'
| 取值： | <length> | <percentage> | none | inherit |
| 初始： | none |
| 適用於： | 除了非置換行內元素、表格行、行群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 相對於包含塊的寬度 |
| 媒介： | 視覺 |
| 計算值： | 同指定值的百比比值或絕對長度或 'none'。 |
這兩個屬性讓網頁作者限制內容寬度於某一個特定的範圍。各取值的意義如下：
auto
負值在 'min-width' 與 'max-width' 上不合法。
在 CSS 2.1 裡，'min-width' 與 'max-width' 在表格、行內表格、表格單元、表格列與列群組上的效果未定義以下演算法描述這兩個屬性如何影響 'width' 屬性的指定值：
- 先從上面《計算寬度與邊界》裡的規則算出（不使用 'min-width' 與 'max-width'）使用寬度的可能值。
- 若可能的使用寬度大於 'max-width'，再次使用上面的規則，不過這次使用 'max-width' 的計算值Error creating thumbnail: Unable to save thumbnail to destination作為 'width' 的計算值。
- 若上面的結果小於 'min-width'，再次使用上面的規則，不過這次使用 'min-width' 的值作為 'width' 的計算值。
然而，對於具有固有長寬比且 'width' 與 'height' 的指定值皆為 'auto' 的置換元素，使用的演算法如下：
| 違反的拘束 | 解出來的寬度 | 解出來的高度 |
|---|---|---|
| 無 | w | h |
| w > max-width | max-width | max(max-width * h/w, min-height) |
| w < min-width | min-width | min(min-width * h/w, max-height) |
| h > max-height | max(max-height * w/h, min-width) | max-height |
| h < min-height | min(min-height * w/h, max-width) | min-height |
| (w > max-width) 且 (h > max-height)，其中 (max-width/w ≦ max-height/h) | max-width | max(min-height, max-width * h/w) |
| (w > max-width) 且 (h > max-height)，其中 (max-width/w > max-height/h) | max(min-width, max-height * w/h) | max-height |
| (w < min-width) 且 (h < min-height)，其中 (min-width/w ≦ min-height/h) | min(max-width, min-height * w/h) | min-height |
| (w < min-width) 且 (h < min-height)，其中 (min-width/w > min-height/h) | min-width | min(max-height, min-width * h/w) |
| (w < min-width) 且 (h > max-height) | min-width | max-height |
| (w > max-width) 且 (h < min-height) | max-width | min-height |
然後將 'width' 的計算值當成此值，使用上面《計算寬度與邊界》裡的規則。
內容高度 ― 'height' 屬性
'height'
| 取值： | <length> | <percentage> | auto | inherit |
| 初始： | auto |
| 適用於： | 除了非置換行內元素、表格列、列群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 參考敘述 |
| 媒介： | 視覺 |
| 計算值： | 百比比值或 'auto'（參考 <percentage> 下的敘述）或絕對長度。 |
本屬性可以用來指定盒的內容高度。
本屬性不適用於非置換行內元素。請參考《計算行內非置換元素的高度與邊界》小節以獲得使用者代理在這種情形使用的規則。
各取值的意義如下：
。在根元素上的百分比高度相對於初始包含塊。對於包含塊由塊容器元素而來的絕對定位元素，百分比值的計算相對於元素「邊距盒」的高度。這個行為與百分比高度的計算總是相對於父元素「內容盒」的 CSS1 不同。auto
負值在 'height' 上不合法。
計算高度與邊界
為了計算 'top'、'margin-top'、'height'、'margin-bottom'、'bottom' 的值，以下各種盒的種類必須分開討論- 行內非置換元素
- 行內置換元素
- 常規流中的塊級非置換元素
- 常規流中的塊級置換元素
- 浮動非置換元素
- 浮動置換元素
- 絕對定位非置換元素
- 絕對定位置換元素
- 常規流中的 'inline-block' 非置換元素
- 常規流中的 'inline-block' 置換元素
對於情況 1-6 與 9-10 的相對定為元素，'top' 與 'bottom' 的使用值由 9.4.3 小節的規則決定。
行內非置換元素
'height' 屬性不適用。使用者代理應該由字體決定內容區域的高度，但是本規範沒指定如何進行。舉例來說，使用者代理可用 EM-盒或字體的最大升部與降部行內非置換盒的垂直邊距、邊框和邊界從內容區域的頂邊與底邊開始，與 'line-height' 無關。使用者代理只用 'line-height' 來計算行盒的高度。
本規範為定義網頁作者使用超過一個字體（這可能發生在使用者代理從不同字體找出字形的時候）的時候內容區域的高度。然而，我們建議高度剛好夠放得下 (1) EM-盒 (2)「所有」在元素裡的字體的最大升部與降部。請注意這可能大於所有在元素內的字體大小，取決於字體的基線對齊。
行內置換元素、常規流中的塊級置換元素與浮動置換元素
若 'margin-top' 或 'margin-bottom' 的計算值為 'auto'，則其使用值為 '0'
若 'height' 與 'width' 的計算值皆為 'auto' 且元素有固有高度，則 'height' 的使用值為該固有高度。
否則，若 'height' 的計算值為 'auto' 且元素具有固有長寬比。則，'height' 的使用值為：
否則，若 'height' 的計算值為 'auto' 且元素具有固有高度，則 'height' 的使用值為該固有高度。
否則，若 'height' 的計算值為 'auto' 且上述條件完全不符，則 'height' 的使用值必須是高度不能大於 150px，且寬度不能大於設備寬度的最大的 2:1 比例長方形的高常規流中 'overflow' 的計算值為 'visible' 的塊級非置換元素
本小節也適用於常規流中 'overflow' 的計算值不為 'visible' 但是 'overflow' 被傳給視口的塊級非置換元素元素的高度是從其頂內容邊到以下第一個符合條件的邊：
- 若盒建立一個一行以上的行內格式劃上下文，邊是最後一個行盒的底邊。
- 若最後一個流內子盒的底邊界不與元素的底邊界折疊，邊是該子盒的底邊（有可能已折疊Error creating thumbnail: Unable to save thumbnail to destination）。
- 邊是頂邊界不與元素的底邊界折疊的最後一個流內子盒的底邊框邊。
- 否則，零Error creating thumbnail: Unable to save thumbnail to destination。
只有在常規流的子盒會被算在內（也就是，使用者代理會忽略浮動盒或是絕對定位盒，並且不考慮相對定位盒的偏移）。請注意子盒可能是無名塊盒。
絕對定位非置換元素
在本小節與下一小節中，術語（一個元素的）「靜態位置」大約是指元素在常規流的時候會在的位置。更精確的說，'top' 的靜態位置是從包含塊的頂邊到假設元素 'position' 的指定值是 'static'、'float' 的指定值是 'none'、'clear' 的指定值是 'none' 的時候的第一個盒的頂邊界邊的距離使用者代理也可以用猜的決定可能的位置而不是真的計算假想盒的布局情形。
在計算靜態位置的過程中，固定定位元素的包含塊是初始包含塊而不是視口對於絕對定位元素，垂直大小的使用值必須滿足這個條件：
若 'top'、'height' 與 'bottom' 三個屬性都為 'auto'，則將 'top' 設為靜態位置並使用以下規則編號三。
若三個屬性沒有一個是 'auto'：若 'margin-top' 和 'margin-bottom' 都是 'auto'，以兩個邊界相等為條件解方程式否則，選出以下六個規則中適用的那一個。
- 若 'top' 與 'height' 是 'auto' 且 'bottom' 不是 'auto'，則高度根據 10.6.7 由內容決定，然後將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'top'。
- 若 'top' 與 'bottom' 是 'auto' 且 'height' 不是 'auto'，則將 'top' 設為靜態位置，然後將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'bottom'。
- 若 'height' 與 'bottom' 是 'auto' 且 'top' 不是 'auto'，則高度根據 10.6.7 由內容決定，然後將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'bottom'。
- 若 'top' 是 'auto' 且 'height' 與 'bottom' 不是 'auto'，則將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'top'。
- 若 'height' 是 'auto' 且 'top' 與 'bottom' 不是 'auto'，則將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'height'。
- 若 'bottom' 是 'auto' 且 'top' 與 'height' 不是 'auto'，則將 'margin-top' 與 'margin-bottom' 的 'auto' 值設為 '0' 並解出 'bottom'。
絕對定位置換元素
除了元素具有固有高度以外，這種情況跟前一個很像。'auto' 的替換順序變成：
- 'height' 的使用值照行內置換元素的方式決定。若 'margin-top' 或 'margin-top' 的指定值為 'auto' 則其使用值按下面規則決定。
- 若 'top' 與 'bottom' 的值都是 'auto'，則將 'top' 以靜態位置取代。
- 若 'bottom' 是 'auto'，則將 'margin-top' 與 'margin-bottom' 的 'auto' 值以 '0' 取代。
- 在這裡若 'margin-top' 與 'margin-bottom' 仍都是 'auto'，以兩個邊界相等為條件解方程式，但是若這會讓邊界為負，則若包含塊的方向是 'ltr'（'rtl'），則設 'margin-left'（'margin-right'）為零並解出 'margin-right'（'margin-left'）。
- 在這裡若仍剩有一個 'auto'，以方程式解出該值。
- 在這裡若值過拘束，則忽略 'bottom' 的值並解出該值。
複雜情形
本小節適用於：
- 常規流中 'overflow' 的計算值不為 'visible' 的塊級非置換元素（除了 'overflow' 屬性的值被傳給視口的元素）。
- 'inline-block' 非置換元素。
- 浮動非置換元素。
若 'margin-top' 或 'margin-bottom' 的計算值為 'auto'，則其使用值為 '0'。若 'height' 是 'auto'，則高度根據 10.6.7 由元素的子嗣決定。
使用者代理會將 'inline-block' 元素的邊界盒用在行盒高度的計算之中。
塊格式化上下文根的 'auto' 高度
在特定情況下若元素只有行內子盒，則高度是從最頂端的行盒的頂邊到最底端行盒的底邊的距離。
若元素只有塊級子盒，則高度是從最頂端的塊級子盒的頂邊界邊到最底端子盒的底邊界邊的距離。
使用者代理會忽略絕對定位盒，並且不考慮相對定位盒的偏移。請注意子盒可能是無名塊盒。
另外，若元素有底邊界邊比元素的底內容邊還低的浮動子嗣高度最小值與最大值 ― 'min-height' 與 'max-height' 屬性
'min-height'
| 取值： | <length> | <percentage> | inherit |
| 初始： | 0 |
| 適用於： | 除了非置換行內元素、表格列、列群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 參考敘述 |
| 媒介： | 視覺 |
| 計算值： | 同指定值的百比比值或絕對長度。 |
'max-height'
| 取值： | <length> | <percentage> | none | inherit |
| 初始： | none |
| 適用於： | 除了非置換行內元素、表格列、列群組以外的所有元素 |
| 繼承： | 否 |
| 百分比： | 參考敘述 |
| 媒介： | 視覺 |
| 計算值： | 同指定值的百比比值或絕對長度或 'none'。 |
這兩個屬性讓網頁作者限制內容高度於某一個特定的範圍。各取值的意義如下：
none
負值在 'min-height' 與 'max-height' 上不合法。
在 CSS 2.1 裡，'min-height' 與 'max-height' 在表格、行內表格、表格單元、表格行與行群組上的效果未定義。
以下演算法描述這兩個屬性如何影響 'height' 屬性的指定值：
- 先從上面《計算高度與邊界》裡的規則算出（不使用 'min-height' 與 'max-height'）使用高度的可能值。
- 若可能的使用高度大於 'max-height'，再次使用上面的規則，不過這次使用 'max-height' 的值作為 'height' 的計算值。
- 若上面的結果小於 'min-height'，再次使用上面的規則，不過這次使用 'min-height' 的值作為 'height' 的計算值。
然而，若元素是 'width' 與 'height' 的計算值都是 'auto' 的置換元素，則使用上面《寬度最小值與最大值》之下的演算法找到寬度與高度的使用值，再將這些值當作計算值使用《計算高度與邊界》之下的規則。
行高計算 ― 'line-height' 與 'vertical-align' 屬性
如同在行內格式化上下文的小節描述的一樣，使用者代理將行內級盒流入垂直堆疊的行盒內。行盒的高度由下面步驟決定：
- 計算行盒裡的各行內級盒的高度。對於置換元素、行內塊元素、行內表格元素來說，這是邊界盒的高度，對於行內盒來說，這時其 'line-height'。（參見《計算高度與邊界》與《Leading 與半 Leading》裡的行內盒的高度。）
- 行內級元素根據其 'vertical-align' 屬性垂直對齊。在這些盒使用 'top' 或 'bottom' 對齊的情況下，使用者代理必須以最小化行盒的高為目標對齊這些盒。若這些盒夠高，則存在多個解而 CSS 2.1 不定義行盒基線的位置（也就是支撐的位置，參見下文）Error creating thumbnail: Unable to save thumbnail to destination。
- 行盒的高是最頂端盒的頂邊到最底端盒的底邊的距離。（這包括支撐，在 'line-height' 下面解釋。）
空白行內元素生成空白行內盒，但是這些盒仍有邊界、邊距、邊框與行高，也因此跟會影響有內容的元素一樣會影響這些計算。
Leading 與半 Leading
CSS 假設每一個字體都帶有一個在基線之上的特徵高度與在基線之下的特徵深度。在本小節裡我們用 A 代表（一個字體裡一個大小的）高度，用 D 代表深度。我們也定義 AD = A + D 為從頂邊到底邊的距離。（參見下面如何在 TrueType 與 OpenType 字體裡找到 A 與 D 的註解。）請注意這些字體的訊息是整個字體擁有的，並不一定代表任何個別字形的升部與降部。
在一個飛至換行內盒裡，使用者代理必須用字形的基線對齊字形。然後，為每一個字形決定 A 與 D。請注意單一個元素裡的字形可能從不同字體而來也因此不見得有相同的 A 與 D。若行內盒裡完全沒有字形，本規範將它視為含有一個支撐（零寬的隱形字形），其 A 與 D 是元素的第一個可用字體。
然後，為每一個字形決定要加的 leading L，其中 L = 'line-height' - AD。半個 leading 加在 A 之上，另外一半加在 D 之下，使得字形的 leading 有在基線以上的全高度 A' = A + L/2 與全深度 D' = D + L/2。
'line-height'
| 取值： | normal | <number> | <length> | <percentage> | inherit |
| 初始： | normal |
| 適用於： | 所有元素 |
| 繼承： | 是 |
| 百分比： | 相對於元素本身的字體大小 |
| 媒介： | 視覺 |
| 計算值： | <length> 與 <percentage> 的計算值為絕對值，其他同指定值。 |
在內容由行內級元素組成的塊容器元素上，'line-height' 可以用來指定元素裡行盒的「最小」高度。最小高度由基線之上的最小高度與基線之下的最小深度組成，就如同每一個行盒由一個零寬，具有原來元素的字體與行高屬性的行內盒開始。我們稱這個假想何為「支撐」（命名靈感從 TeX 而來。）
本規範假設字體在基線之上與之下的高度與深度的資訊在字體裡面。（參加 CSS 等級三以獲得詳情。）
在非置換行內元素上，'line-height' 可以用來指定用來計算行盒高度的高度。
各取值的意義如下：
normal
div { line-height: 1.2; font-size: 10pt } /* 數字 */
div { line-height: 1.2em; font-size: 10pt } /* 長度 */
div { line-height: 120%; font-size: 10pt } /* 百分比 */當一個元素包含需要以超過一個字體渲染的文字的時候，使用者代理可用最大的字體大小決定 'normal' 'line-height'。
'vertical-align'
| 取值： | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit |
| 初始： | baseline |
| 適用於： | 行內級元素與 'table-cell' |
| 繼承： | 否 |
| 百分比： | 相對於元素本身的 'line-height' |
| 媒介： | 視覺 |
| 計算值： | <percetage> 與 <length> 的計算值為絕對值，其他同指定值。 |
本屬性可以用來影響一個行內級元素生成的合在一個行合理的垂直定位。
以下的值僅相對於父行內元素或是父塊容器元素的支撐有意義。
在下面定義中，對於行內非置換元素，用來對齊的盒是高度為 'line-height' 的盒（包含盒的字形與兩邊的半 leading，參見上面）。對於其它元素，用來對齊的盒是邊界盒。
baseline
middle
sub
super
text-top
text-bottom
以下的值將元素相對於行盒對齊。由於元素可能有相對其對齊的子元素（這些子元素又有相對於它們對齊的子嗣），這些值使用對齊子樹的邊界。一個行內元素的對齊子樹包含該元素與其所有 'vertical-align' 的計算值不為 'top' 或 'bottom' 的子行內元素的對齊子樹。對齊子樹的頂邊是在子樹中的盒的頂邊裡面最高的邊，對齊子樹的底邊的定義類似。
top
bottom
'inline-table' 的基線是表格第一行的基線。
若 'inline-block' 沒有流內行盒或其 'overflow' 屬性的計算值不是 'visible' 則基線是底邊界邊，否則 'inline-block' 的基線是常規流裡最後一個行盒的基線。