inset-inline-end

inset-inline-end 是一个 CSS 属性，用于设置元素在起始内联方向上的偏移长度。它有点像声明 right，因为它应用于定位元素并在左侧方向上偏移元素，但它的起始和结束点可以根据元素的 direction、text-orientation 和 writing-mode 更改，就像其他 逻辑属性 一样。

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

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

因此，例如，如果书写模式设置为 horizontal-lr，inset-inline-end 属性的行为就像设置 left 一样，从左侧边缘偏移元素。您甚至需要在同一个元素上指定显式的 position 才能使其生效，就像物理偏移属性一样。

但是将元素的 writing-mode 更改为类似 vertical-lr 的内容，则“起始”边缘将在垂直方向上旋转，更像 top 的行为。

语法

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

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

值

inset-block 接受长度值并支持全局关键字。其默认值为 auto。

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

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

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

/* Global values */
inset-inline-end: initial
inset-inline-end: inherit;
inset-inline-end: 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
• inset-inline-start

进一步阅读

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