margin-block-start | CSS-Tricks 中文

CSS 中的 margin-block-start 属性定义了元素在块方向上的外起始边缘的间距。它包含在 CSS 逻辑属性级别 1 规范中，目前处于工作草案阶段。

.element {
  margin-block-start: 25%;
  writing-mode: vertical-lr;
}

块方向上的起始边缘由元素的 writing-mode、direction 和 text-orientation 决定。因此，在水平从左到右的上下文中使用 margin-block-start 时，它就像 margin-top 一样，因为元素的起始边缘是它的顶部。

但如果我们将 writing-mode 更改为垂直，例如，元素会旋转，将起始边缘放置在左侧。因此，margin-block-start 的行为就像 margin-left 一样。基本上，起始边缘相对于其流动方向而言。这就是我们谈论“逻辑”属性时所指的。

语法

margin-block-start: <‘margin-top’>

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

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

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

值

margin-block-start 接受单个长度或关键字值。

/* Length values */
margin-block-start: 20px;
margin-block-start: 2rem;
margin-block-start: 25%;

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

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