Inset-block | CSS-Tricks 中文

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

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

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

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

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

语法

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

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

值

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

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

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

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

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