DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!
margin-inline
是 CSS 中的一个简写属性,它设置元素的 margin-inline-start
和 margin-inline-end
值,这两个值都是 逻辑属性。它在内联方向上围绕元素创建空间,该方向由元素的 writing-mode
、direction
和 text-orientation
确定。
该属性是 CSS 逻辑属性和值级别 1 规范 的一部分,目前处于编辑草案状态。这意味着它定义和信息在现在到正式推荐之间可能会发生变化。
.element {
margin-inline: 60px auto;
writing-mode: vertical-rl; /* Determines the inline start direction */
}
如果 writing-mode
设置为 horizontal-lr
,则 margin-inline
属性的作用就像设置 margin-left
和 margin-right
一样。此属性的一个有趣方面是,它是逻辑属性之一,它与非逻辑属性之间没有一一映射。没有旧的属性可以同时(并且仅)设置内联方向边距。
但是,将元素的 writing-mode
更改为类似 vertical-lr
的内容,则“内联”边沿会以垂直方向旋转,更像 margin-top
和 margin-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;
演示
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 否 | 66+ | 87+ | 否 | 否 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
是 | 是 | 否 | 否 | 59+ |
进一步阅读
相关属性
direction
.element { direction: rtl; }
margin
.element { margin: 50px 2rem; }
margin-block
.element { margin-block: 30px 60px; }
margin-block-end
.element { margin-block-end: 25%; }
margin-block-start
.element { margin-block-start: 25%; }
margin-inline-end
.element { margin-inline-end: 3rem; }
margin-inline-start
.element { margin-inline-start: 25%; }
text-orientation
元素 { text-orientation: mixed; }
writing-mode
.element { writing-mode: vertical-rl; }