inset-block-start

inset-block-start 是一个逻辑 CSS 属性，它设置元素在块方向上从其起始边缘偏移的长度。 它有点像声明 top，只不过它的起点由元素的 direction、text-orientation 和 writing-mode 决定，就像其他 逻辑属性 一样。

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

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

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

但是，将元素的 writing-mode 更改为类似于 vertical-rl 的东西，则起始边缘将在垂直方向上旋转，更像 left 属性。

语法

inset-block-start: <'top'>;

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

值

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

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

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

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

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

浏览器支持

关于 mdn-css__properties__inset-block-start 特性在主要浏览器中的支持情况数据

演示

相关属性

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

进一步阅读

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