用于外边距、边框和内边距的逻辑属性

规范详述了每个逻辑值到实体值的对应关系。假设用的是 horizontal-tb 的书写模式（writing-mode）和从左到右的行内方向，我在下面的表格里给出了这些对应的属性。这时行向是水平方向——从左到右——而且 margin-inline-start 会等价于 margin-left。

如果你用了 horizontal-tb 的书写模式和从右到左的行内方向，那么 margin-inline-start 会和 margin-right 一样，而在竖排书写模式里 margin-inline-start 会和用 margin-top 一样。

还有一些简写属性可以用于让我们同时设置盒子块向或者行向的两侧。这些简写属性没有等价的实体属性。

有对应关系的外边距属性 margin-inline-start、margin-inline-end、margin-block-start 和 margin-inline-end 可用于替代对应的实体属性。

在下面的例子里我创建了两个盒子，给每条边加上了不同大小的外边距。为了让外边距更明显，我另外加上了带边框的容器。

一个盒子用的实体属性，另一个用的逻辑属性。试试把 direction 属性改成 rtl，让盒子显示在从右到左的行内方向里，第一个盒子的外边距会保持不动，而第二个盒子行向的外边距会发生切换。

你也可以试试把 writing-mode 从 horizontal-tb 改成 vertical-rl。注意到第一个盒子的外边距还是保持不动，但是第二个的跟着文本的行内方向四处切换。

既然我们现在可以同时设置盒子的两侧——要么行向要么块向的两侧——那就有新的简写属性 margin-inline 和 margin-block 可以接受两个值。第一个值会应用到那个方向的首侧，第二个应用到末侧。如果你只用一个值，那么这个值应用到两侧。

在横排书写模式里，这段 CSS 会给盒子上侧 5px 的外边距，下侧 10px 的外边距。

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

有对应关系的内边距属性 padding-inline-start、padding-inline-end、padding-block-start 和 padding-inline-end 可用于替代对应的实体属性。

在下面的例子里我有两个盒子，一个用的实体内边距属性，而另一个用的逻辑内边距属性。在 horizontal-tb 的书写模式（writing-mode）里，两个盒子应该看起来一样。

试试把 direction 属性改成 rtl，让盒子显示在从右到左的行内方向里。第一个盒子的内边距会保持不动，而第二盒子行向的内边距会发生切换。

你也可以试试把 writing-mode 从 horizontal-tb 改成 vertical-rl。注意到第一个盒子的内边距还是保持不动，但是第二个的跟着文本的行内方向四处切换。

和外边距一样，内边距也有二值简写属性——padding-inline 和 padding-block——可以让你分别设置行向和块向的两个内边距。

在横排书写模式里，这段 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 等任意四值简写属性将使用实体属性，因此若跟随文档的流向很重要，则暂时使用全称属性。