DigitalOcean 为您旅程的每个阶段提供云产品。从 免费获得 200 美元的信用额度!
CSS 中的 margin-inline-start
属性定义了元素在内联方向上沿外侧起始边缘的空格量。它包含在 CSS 逻辑属性级别 1 规范 中,该规范目前处于工作草案阶段。
.element {
margin-inline-start: 25%;
writing-mode: vertical-lr;
}
内联方向的起始边缘由元素的 writing-mode
、direction
和 text-orientation
决定。因此,在水平从左到右的上下文中使用 margin-inline-start
时,它就像 margin-left
一样,因为元素的起始边缘是左侧。
但是,如果我们将 writing-mode
更改为(例如)垂直,则元素将顺时针旋转,将起始边缘放置在顶部。结果,margin-inline-start
的行为就像 margin-top
一样。基本上,起始边缘相对于其流动方向。这就是我们谈论“逻辑”属性时所指的意思。
语法
margin-inline-start: <‘margin-top’>
在文档中看到一个属性的语法引用了另一个 CSS 属性的语法有点奇怪,但事实就是这样。它基本上想说的是,该属性接受与 margin-top
相同的值,margin-top
遵循以下语法。
margin-top: <length> | <percentage> | auto;
- 初始值:
0
- 应用于:除内部表格元素、ruby 基容器和 ruby 注解容器之外的所有元素。
- 继承:否
- 百分比:与相应的物理属性相同。
- 计算值:与相应的
margin-*
属性相同。 - 动画类型:按计算值类型。
值
margin-block-start
接受单个长度或关键字值。
/* Length values */
margin-inline-start: 20px;
margin-inline-start: 2rem;
margin-inline-start: 25%;
/* Keyword values */
margin-inline-start: auto;
/* Global values */
margin-inline-start: inherit;
margin-inline-start: initial;
margin-inline-start: 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+ |
进一步阅读
相关属性
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
.element { margin-inline: 60px auto; }
margin-inline-end
.element { margin-inline-end: 3rem; }