CSS | inset-inline-end 属性

概述

inset-inline-end 属性用于设置元素的右侧内边距边缘到其包含块的右侧内边距边缘的距离。该属性只能用于定位类型为 absolute 或 fixed 的元素。

语法

/* 关键字值 */
inset-inline-end: auto;
inset-inline-end: <length> | <percentage> | auto;

/* 全局值 */
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: unset;

值

• auto：默认值，表示元素的右侧内边距边缘在包含块的右侧内边距边缘内。
• <length>：指定元素的右侧内边距边缘到其包含块的右侧内边距边缘的距离，可以为负值。
• <percentage>：相对于包含块的宽度计算的元素的右侧内边距边缘到其包含块的右侧内边距边缘的距离。可以为负值。

示例

.example {
  position: absolute;
  inset-inline-end: 20px;
  background-color: pink;
}

在上面的示例中，元素 .example 的右侧内边距边缘距离其包含块的右侧内边距边缘为 20px。

.example {
  position: fixed;
  inset-inline-end: 20%;
  background-color: pink;
}

在上面的示例中，元素 .example 的右侧内边距边缘距离其包含块的右侧内边距边缘的距离为包含块宽度的 20%。

浏览器支持情况

该属性的浏览器支持情况较为广泛，适用于大多数现代浏览器。IE 浏览器不支持该属性。