内边距-内联-开始 | CSS-Tricks 中文

inset-inline-start 是一个 CSS 属性，用于设置元素在开始内联方向上的偏移长度。它类似于声明 left，因为它适用于定位元素并在左侧偏移元素，但它的起点和终点可以根据元素的 方向、文本方向 和 书写模式 进行更改，就像其他逻辑属性一样。

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

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

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

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

语法

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

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

值

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

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

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

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

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

浏览器支持

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

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

来源：caniuse

语法

值

浏览器支持

演示

进一步阅读

语法

值

浏览器支持

演示

相关属性

进一步阅读