margin-block-end

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

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

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

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

语法

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

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

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

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

值

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

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

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

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

演示

单击以下演示中的按钮，查看元素的起始边缘如何随 writing-mode 更改。

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	79+	41+	69+	12.1+	56+

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mobile
是	是	81+	12.2+	59+

进一步阅读

相关属性