內聯格式化上下文
本文解釋了內聯格式化上下文。
核心概念
內聯格式化上下文是網頁視覺呈現的一部分。內聯框一個接一個地排列，按照正在使用的書寫模式中句子執行的方向排列。
- 在水平書寫模式中，框從左側開始水平排列。
- 在垂直書寫模式中，它們將從頂部開始垂直排列。
在下面的示例中，具有黑色邊框的兩個 <div> 元素是 塊格式化上下文 的一部分，而在每個框內，單詞參與內聯格式化上下文。水平書寫模式中的單詞水平執行，而垂直書寫模式中的單詞垂直執行。
形成一行的框包含在一個稱為行框的矩形區域中。此框將足夠大以容納該行中的所有內聯框；當內聯方向上沒有更多空間時，將建立另一行。因此，段落是一組內聯行框，在塊方向上堆疊。
當內聯框被拆分時，外邊距、邊框和內邊距在拆分處沒有視覺效果。在下一個示例中，有一個 <span> 元素包裹著一組單詞，這些單詞包裹在兩行上。<span> 上的邊框在包裹點處斷開。
內聯方向上的外邊距、邊框和內邊距將被尊重。在下面的示例中，您可以看到內聯 <span> 元素上的外邊距、邊框和內邊距是如何新增的。
注意：我使用的是邏輯、流相關的屬性——padding-inline-start 而不是 padding-left——以便它們在文字是水平還是垂直時都可以在內聯維度上工作。有關這些屬性的更多資訊，請閱讀 邏輯屬性和值。
塊方向對齊
可以使用 vertical-align 屬性以不同的方式在塊方向上對齊內聯框，該屬性將在垂直書寫模式中對齊塊軸線（因此根本不是垂直對齊！）。在下面的示例中，大型文字使第一句話的行框更大，因此可以使用 vertical-align 屬性對齊兩側的內聯框。我使用了 top 值，嘗試將其更改為 middle、bottom 或 baseline。
內聯方向對齊
如果內聯方向上有額外空間，可以使用 text-align 屬性在其行框內對齊內聯框。嘗試將下面的 text-align 的值更改為 end。
浮動影響
行框通常在內聯方向上具有相同的大小，因此如果在水平書寫模式下工作，則具有相同的寬度，如果在垂直書寫模式下工作，則具有相同的高度。但是，如果在同一個塊格式化上下文中有一個 float，則浮動將導致包裹浮動的行框變得更短。