margin-inline

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

margin-inline 是 CSS 中的一个简写属性,它设置元素的 margin-inline-startmargin-inline-end 值,这两个值都是 逻辑属性。它在内联方向上围绕元素创建空间,该方向由元素的 writing-modedirectiontext-orientation 确定。

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

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

如果 writing-mode 设置为 horizontal-lr,则 margin-inline 属性的作用就像设置 margin-leftmargin-right 一样。此属性的一个有趣方面是,它是逻辑属性之一,它与非逻辑属性之间没有一一映射。没有旧的属性可以同时(并且仅)设置内联方向边距。

但是,将元素的 writing-mode 更改为类似 vertical-lr 的内容,则“内联”边沿会以垂直方向旋转,更像 margin-topmargin-bottom 属性。

语法

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

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

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

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

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

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

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

演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
66+87+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
59+
来源:caniuse

进一步阅读