Margin-block | CSS-Tricks

margin-block 是 CSS 中的简写属性，用于设置元素的 margin-block-start 和 margin-block-end 值，这两个值都是逻辑属性。它在元素的块方向上创建围绕元素的空间，该方向由元素的 writing-mode、direction 和 text-orientation 决定。

该属性是 CSS 逻辑属性和值级别 1 规范的一部分，该规范目前处于编辑草案状态。这意味着它的定义和信息可能会在正式推荐之前发生变化。

.element {
  margin-block: 30px 60px;
  writing-mode: vertical-rl; /* Determines the block start direction */
}

如果 writing-mode 设置为 horizontal-lr，则 margin-block 属性的行为就像设置 margin-top 和 margin-bottom 一样。 此属性的一个有趣方面是，它是少数没有与非逻辑属性一一对应的逻辑属性之一。没有旧的属性可以同时设置（并且仅设置）块方向的边距。

但是，将元素的 writing-mode 更改为 vertical-lr 之类的值，则“底部”边缘会沿垂直方向旋转，更像 margin-left 和 margin-right 属性。

语法

margin-block: <'margin-top'>{1,2}

在文档中看到一个属性的语法引用另一个 CSS 属性的语法有点奇怪，但这确实是它。基本上它是在说该属性接受与 margin-top 相同的值（最多两次），遵循以下语法

margin-top: <length> | <percentage> | auto;

初始值： 0
应用于：除内部表格元素、ruby 基容器和 ruby 注释容器之外的所有元素
继承：否
百分比：与相应的物理属性相同
计算值：与相应的 margin-* 属性相同
动画类型：通过计算值的类型

值

如果您熟悉 margin 简写属性，那么 margin-block 会感觉非常熟悉。唯一的区别是它在两个方向而不是四个方向上起作用。

/* Length values */
margin-block: 20px 40px;
margin-block: 2rem 4rem;
margin-block: 25% 15%;
margin-block: 20px; /* a single value sets both values */

/* Keyword values */
margin-block: auto;

/* Global values */
margin-block: inherit;
margin-block: initial;
margin-block: unset;