用於外邊距、邊框和內邊距的邏輯屬性
CSS 邏輯屬性和值模組為各種外邊距、邊框和內邊距屬性及其簡寫屬性定義了流相對的對映。在本指南中，我們將探討這些內容。
如果你檢視邏輯屬性和值模組，你可能會注意到該模組的屬性列表非常長。這主要是因為外邊距、邊框和內邊距的每個邊都有四個普通屬性值，再加上所有的簡寫屬性值。
外邊距、邊框和內邊距的對映
該模組詳細說明了每個邏輯值到物理對應項的對映。下表展示了當 writing-mode 為 horizontal-tb 且方向為從左到右時這些值的對映。因此，行內方向是水平的——從左到右——並且 margin-inline-start 等同於 margin-left。
如果你使用 horizontal-tb 書寫模式，但文字方向為從右到左，那麼 margin-inline-start 將等同於 margin-right；而在垂直書寫模式下，它將等同於使用 margin-top。
還有一些額外的簡寫屬性，這是因為我們可以同時指定盒子的塊級或行內兩邊。這些簡寫屬性沒有物理等價物。
| 屬性 | 用途 |
|---|---|
border-block |
設定塊級兩邊的 border-color、border-style 和 border-width。 |
border-block-color |
設定塊級兩邊的 border-color。 |
border-block-style |
設定塊級兩邊的 border-style。 |
border-block-width |
設定塊級兩邊的 border-width。 |
border-inline |
設定行內兩邊的 border-color、-style 和 -width。 |
border-inline-color |
設定行內兩邊的 border-color。 |
border-inline-style |
設定行內兩邊的 border-style。 |
border-inline-width |
設定行內兩邊的 border-width。 |
margin-block |
設定所有的塊級 margin。 |
margin-inline |
設定所有的行內 margin。 |
padding-block |
設定塊級 padding。 |
padding-inline |
設定行內 padding。 |
外邊距示例
對映的外邊距屬性 margin-inline-start、margin-inline-end、margin-block-start 和 margin-inline-end 可以用來替代它們的物理對應項。
此示例中有兩個盒子，每個邊都有不同大小的外邊距。為了讓外邊距更明顯，我們增加了一個帶邊框的額外容器。
一個盒子使用物理屬性，另一個使用邏輯屬性。嘗試將 direction 屬性更改為 rtl，使盒子以從右到左的方向顯示；第一個盒子的外邊距將保持在原位，而第二個盒子在行內方向上的外邊距將會交換位置。
還可以嘗試將 writing-mode 從 horizontal-tb 更改為 vertical-rl。注意第一個盒子的外邊距如何保持在原位，而第二個盒子的外邊距則會隨文字方向而改變。
<div class="container">
<div class="inner">
<div class="physical box">
margin-top: 5px<br />
margin-right: 0<br />
margin-bottom: 2em<br />
margin-left: 50px
</div>
</div>
<div class="inner">
<div class="logical box">
margin-block-start: 5px<br />
margin-inline-end: 0<br />
margin-block-end: 2em<br />
margin-inline-start: 50px
</div>
</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
margin-top: 5px;
margin-right: 0;
margin-bottom: 2em;
margin-left: 50px;
}
.logical {
margin-block-start: 5px;
margin-inline-end: 0;
margin-block-end: 2em;
margin-inline-start: 50px;
}
外邊距簡寫
有一些簡寫屬性可以同時指定行內兩側或塊級兩側，它們分別是 margin-inline 和 margin-block。每個屬性接受兩個值。第一個值將應用於該維度的起始邊，第二個值應用於結束邊。如果只設置一個值，它將應用於兩邊。
在水平書寫模式下，此 CSS 將為盒子的頂部應用 5px 的外邊距，為底部應用 10px 的外邊距。
.box {
margin-block: 5px 10px;
}
內邊距示例
對映的內邊距屬性 padding-inline-start、padding-inline-end、padding-block-start 和 padding-inline-end 可以用來替代它們的物理對應項。
在此示例中，有兩個盒子。一個設定了物理內邊距屬性，另一個使用邏輯內邊距屬性。當 writing-mode 為 horizontal-tb 時，兩個盒子看起來應該是一樣的。
嘗試將 direction 屬性更改為 rtl，使盒子以從右到左的方向顯示。第一個盒子的內邊距將保持在原位，而第二個盒子在行內方向上的內邊距將會交換位置。
你也可以嘗試將 writing-mode 從 horizontal-tb 更改為 vertical-rl。再次注意，第一個盒子的內邊距如何保持在原位，而第二個盒子的內邊距則會隨文字方向而改變。
<div class="container">
<div class="physical box">
padding-top: 5px<br />
padding-right: 0<br />
padding-bottom: 2em<br />
padding-left: 50px
</div>
<div class="logical box">
padding-block-start: 5px<br />
padding-inline-end: 0<br />
padding-block-end: 2em<br />
padding-inline-start: 50px
</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
padding-top: 5px;
padding-right: 0;
padding-bottom: 2em;
padding-left: 50px;
}
.logical {
padding-block-start: 5px;
padding-inline-end: 0;
padding-block-end: 2em;
padding-inline-start: 50px;
}
內邊距簡寫
與外邊距一樣，內邊距也有雙值簡寫屬性——padding-inline 和 padding-block——它們分別允許你設定行內兩個方向和塊級兩個方向的內邊距。
在水平 writing-mode 下，此 CSS 將為盒子的頂部應用 5px 的內邊距，為底部應用 10px 的內邊距。
.box {
padding-block: 5px 10px;
}
邊框示例
邊框屬性是該模組看起來有如此多屬性的主要原因，因為它為盒子每一邊的邊框顏色、寬度和樣式提供了普通邏輯屬性，以及一次性為每一邊設定這三者的簡寫屬性。與外邊距和內邊距一樣，每個物理屬性都有一個對映版本。
下面的演示使用了一些普通屬性和三個簡寫屬性值。與其他演示一樣，嘗試將 direction 屬性更改為 rtl 以使盒子以從右到左的方向顯示，或者將 writing-mode 從 horizontal-tb 更改為 vertical-rl。
<div class="container">
<div class="physical box">Borders using physical properties.</div>
<div class="logical box">Borders using logical properties.</div>
</div>
.box {
writing-mode: horizontal-tb;
direction: ltr;
}
.physical {
border-top: 2px solid hotpink;
border-right-style: dotted;
border-right-color: goldenrod;
border-right-width: 5px;
border-bottom: 4px double black;
border-left: none;
}
.logical {
border-block-start: 2px solid hotpink;
border-inline-end-style: dotted;
border-inline-end-color: goldenrod;
border-inline-end-width: 5px;
border-block-end: 4px double black;
border-inline-start: none;
}
邊框簡寫
有一些雙值簡寫屬性可以設定塊級或行內方向的寬度、樣式和顏色，還有一些簡寫屬性可以設定塊級或行內方向的所有三個值。在水平書寫模式下，下面的程式碼會為盒子的頂部和底部提供 2px 綠色實線邊框，為左側和右側提供 4px 點狀紫色邊框。
.box {
border-block: 2px solid green;
border-inline-width: 4px;
border-inline-style: dotted;
border-inline-color: rebeccapurple;
}
流相對的 border-radius 屬性
border-radius 普通屬性也有流相對的等價物。在水平 writing-mode 下，下面的示例會將右上角的邊框半徑設定為 1em，右下角為 0，左下角為 20px，左上角為 40px。
.box {
border-end-start-radius: 1em;
border-end-end-radius: 0;
border-start-end-radius: 20px;
border-start-start-radius: 40px;
}
為四值簡寫語法指定邏輯值
規範對像 margin 這樣的四值簡寫屬性提出了建議，但關於如何表示這一點的最終決定尚未解決，相關討論見此議題。
目前，使用任何四值簡寫屬性（如 margin、padding 或 border）都將使用物理版本，因此如果遵循文件流很重要，請暫時使用普通屬性。