margin-inline-end

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

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

内联方向的结束边缘由元素的 writing-mode、direction 和 text-orientation 决定。 因此，在水平从左到右的上下文中使用 margin-inline-end 时，它就像 margin-right 一样，因为元素的结束边缘是右侧。

但如果我们将 writing-mode 更改为例如垂直方向，则元素将顺时针旋转，将结束边缘放置到底部。 因此，margin-inline-end 的行为就像 margin-bottom 一样。 基本上，起始边缘相对于其流动方向。 这也是我们谈论“逻辑”属性时所指的。

语法

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

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

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

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

值

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

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

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

/* Global values */
margin-inline-end: inherit;
margin-inline-end: initial;
margin-inline-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+

进一步阅读

相关属性