CSS | inset-inline-start 属性

inset-inline-start 属性定义了一个元素的内边距框的起始内联方向内间距。

语法

/* 单个值语法 */
inset-inline-start: <length> | <percentage> | auto;

/* 双值语法 */
inset-inline-start: <length> | <percentage> | auto <length> | <percentage>;

/* 全局值语法 */
inset-inline-start: inherit;
inset-inline-start: initial;
inset-inline-start: revert;
inset-inline-start: unset;

• <length>：定义一个长度值。
• <percentage>：定义一个百分比值，相对于包含块的宽度。
• auto：浏览器自动计算。
• inherit：继承父元素的属性值。
• initial：属性被设置为它的默认值。
• revert：如果有继承，则该值为inherit，否则为initial。
• unset：如果有继承，则该值为inherit，否则为initial。

示例

单值语法

.example {
  inset-inline-start: 20px;
}

设置了 inset-inline-start 值为 20px 的元素内边距。

双值语法

.example {
  inset-inline-start: 20px 30px;
}

设置了 inset-inline-start 值为 20px 的元素内边距，同时设置了内边距结束内联方向上的值为 30px。

示例

.example {
  inset-inline-start: 10%;
}

设置了 inset-inline-start 值为元素包含块的宽度的 10% 的元素内边距。

全局值语法

.example {
  inset-inline-start: unset;
}

将 inset-inline-start 属性重置为默认值。

浏览器兼容性

inset-inline-start 属性的浏览器兼容性如下：

| Chrome | Safari | Firefox | Opera | IE | Edge | | :-----: | :----: | :-------: | :---: | :-: | :--: | | 86.0 | 14.0 | 79.0 | 73.0 | No | 86.0 |

参考

1. CSS Inset Properties
2. Can I use inset-inline CSS property