margin-inline-start

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。从 免费获得 200 美元的信用额度!

CSS 中的 margin-inline-start 属性定义了元素在内联方向上沿外侧起始边缘的空格量。它包含在 CSS 逻辑属性级别 1 规范 中,该规范目前处于工作草案阶段。

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

内联方向的起始边缘由元素的 writing-modedirectiontext-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 更改。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
79+41+69+12.1+56+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
81+12.2+59+
来源:caniuse

进一步阅读