用于外边距、边框和内边距的逻辑属性
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）都将使用物理版本，因此如果遵循文档流很重要，请暂时使用普通属性。