边距、边框和填充的逻辑属性

The module details mappings for each logical value to a physical counterpart. The table below maps these values for when the writing-mode is horizontal-tb — with a left to right direction. The inline direction therefore runs horizontally — left to right — and margin-inline-start would be equivalent to margin-left.

If you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top.

There are also some additional shorthands, made possible because we can target both block or both inline edges of the box simultaneously. These shorthands have no physical equivalent.

The mapped margin properties of margin-inline-start, margin-inline-end, margin-block-start, and margin-inline-end can be used instead of their physical counterparts.

This example has two boxes with different sized margins to each edge. An extra container with a border has been included to make the margin more apparent.

One box uses physical properties and the other logical properties. Try changing the direction property to rtl to cause the boxes to display in a right-to-left direction; the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch.

Also try changing the writing-mode from horizontal-tb to vertical-rl. Notice how the margins stay in the same place for the first box, but switch around to follow the text direction in the second.

There are shorthands available to target either both the inline sides or both the block sides, margin-inline and margin-block respectively. Each accepts two values. The first value will apply to the start of that dimension, the second to the end. If only one value is set, it is applied to both.

In a horizontal writing mode this CSS would apply a 5px margin to the top of the box and a 10px margin to the bottom.

.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。同样，注意填充如何为第一个盒子保持在相同的位置，但在第二个盒子中围绕文本方向进行切换。

与边距一样，填充也有两个值的简写形式 - padding-inline 和 padding-block - 它们允许你分别设置两个内联和两个块维度的填充。

在水平 writing-mode 中，此 CSS 将在盒子的顶部应用 5px 的填充，并在底部应用 10px 的填充。

.box {
  padding-block: 5px 10px;
}

边框属性是这个模块似乎有这么多属性的主要原因，因为它为盒子每侧边框的颜色、宽度和样式提供了长格式逻辑属性，以及用于一次为每侧设置所有三个属性的简写形式。与边距和填充一样，每个物理属性都有一个映射版本。

下面的演示使用了一些长格式和三个简写值。与其他演示一样，尝试将 direction 属性更改为 rtl，使盒子以从右到左的方向显示，或将 writing-mode 从 horizontal-tb 更改为 vertical-rl。

有两个值的简写形式用于设置块或内联维度的宽度、样式和颜色，以及用于设置块或内联维度中所有三个值的简写形式。下面的代码，在水平书写模式下，将在盒子的顶部和底部提供 2px 绿色实线 边框，在左侧和右侧提供 4px 点状紫色 边框。

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

该模块为 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，都会使用物理版本，因此，如果遵循文档流很重要，暂时使用长格式属性。