inset-block-end

inset-block-end 是一个逻辑 CSS 属性，它设置元素在其结束边缘的块方向上的偏移长度。它类似于声明 bottom，只是它的结束点由元素的 direction、text-orientation 和 writing-mode 决定，就像其他 逻辑属性 一样。

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

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

因此，例如，如果将书写模式设置为 horizontal-lr，则 inset-block-end 属性将像 bottom 一样工作，并设置元素从底部边缘的偏移量。您甚至需要在同一个元素上指定显式 position 才能使其生效，就像 bottom 和其他物理偏移属性一样。

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

语法

inset-block-end: <'bottom'>;

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

值

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

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

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

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

/* Global values */
inset-block-end: initial
inset-block-end: inherit;
inset-block-end: unset;

浏览器支持

IE	Edge	Firefox	Chrome	Safari	Opera
不支持	不支持	63+	不支持	不支持	不支持

Android Chrome	Android Firefox	Android 浏览器	iOS Safari	Opera Mini
不支持	79+	不支持	不支持	不支持

演示

相关属性

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

进一步阅读

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