inset-inline

inset-inline 是一种逻辑 CSS 属性的简写形式，它设置元素在内联方向上的偏移长度，将 inset-inline-start 和 inset-inline-end 组合起来。 它类似于声明 right 和 left，只是它的起点和终点由元素的 direction、text-orientation 和 writing-mode 决定，就像其他 逻辑属性 一样。

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

.element {
  inset-inline: 50px 15%;
  position: relative; /* Applies to positioned elements */
  writing-mode: vertical-rl; /* Determines the block start direction */
}

因此，例如，如果书写模式设置为 horizontal-lr，inset-inline 属性的行为就像设置 top 和 bottom 一样，并设置元素相对于底部的偏移量。 您甚至需要在同一个元素上指定一个显式的 position，才能使它生效，就像物理偏移属性一样。

但是，将元素的 writing-mode 更改为类似 vertical-lr 的内容，则“底部”边缘会在垂直方向上旋转，更像 left 和 right 属性的行为。

语法

inset-inline: <'top'> <'left'>;

• 初始值: auto
• 应用于: 定位元素
• 继承: 否
• 百分比: 与相应的物理属性相同
• 计算值: 与相应的 top 和 left 属性相同
• 动画类型: 按计算值类型

值

inset-inline 接受长度值，并支持全局关键字。 它的默认值为 auto。

/* Length values */
inset-inline: 50px;
inset-inline: 4em;
inset-inline: 3.5rem
inset-inline: 25vh;

/* Percentage values */
inset-inline: 50%;

/* Keyword values */
inset-inline: auto; /* initial value */

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

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	否	63+	否	否	否

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mini
否	79+	否	否	否

演示

相关属性

• inset-block
• inset-block-end
• inset-block-start
• inset-inline-end
• inset-inline-start

进一步阅读

• CSS 逻辑属性和值级别 1 规范 (编辑草案)
• MDN 文档
• 理解逻辑属性和值 (Smashing Magazine)
• CSS 逻辑属性 (Adrian Roselli)
• CSS 中的双向水平规则 (Hussein Al Hammad)