内边距

CSS 中的 inset 属性是四个内边距属性的简写，top、right、bottom 和 left，在一个声明中。 与这四个独立属性本身一样，inset 对非定位（静态）元素没有影响。 换句话说，元素必须声明一个显式的 position 值，然后内边距属性才能生效。

.box {
  inset: 10px 20px 30px 40px;
  position: relative;
}

inset 最初在 CSS 逻辑属性和值级别 1 规范中定义，截至 2020 年 4 月 20 日，该规范处于编辑草案阶段。

语法

您可能从上面的示例中了解到，inset 遵循与 padding 和 margin 相同的多值语法。 这意味着它最多可以接受四个值（用于声明 top、right、bottom 和 left 的偏移量），最少可以接受一个值（用于声明所有四个属性的相等偏移量）。 而且，与 padding 和 margin 一样，这些值以顺时针方向流动，从 top 开始。

.element {
  inset: 1em 2em 3em 0; /* top right bottom left */
  inset: 10% 5% -10%;   /* top left/right bottom */
  inset: 0 10px;        /* top/bottom left/right */
  inset: 20px;          /* all edges = 20px */
}

在 inset 之前，我们必须分别声明每个 inset 子属性，如下所示

.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

现在，我们可以将其简化为一行 CSS 代码： 

.box {
  position: absolute;
  inset: 0; /* 🎉 */
}

值

inset 属性接受与 top、right、bottom 和 left 相同的数值。 这些值可以是任何有效的 CSS 长度，例如 px、em、rem 和 % 等。

让我们谈谈逻辑属性

我们只是要在这里简要介绍一下逻辑属性，因为真正的重点是 inset 及其相关的子属性。 在 Rachel Andrew 的这篇 Smashing Magazine 文章 中，可以全面深入地了解该主题。

除了 top、right、bottom 和 left 之外，还有更多 inset 子属性，但为了理解它们，了解逻辑属性和值是很有必要的。

内容可以以不同的方向显示（即 书写模式），包括从左到右、从右到左、从上到下和从下到上。 当我们谈论“逻辑”概念时，我们实际上是指基于内容书写方向的起点。

假设您正在构建一个需要同时支持从左到右（LTR）语言（如英语和西班牙语）和从右到左（RTL）语言（如波斯语或阿拉伯语）的网站。 假设您想在图标和它旁边的文本行之间添加一个边距。

自然地，您可能会使用 margin-right 属性来支持 LTR，然后添加另一个规则集来移除该边距并用 margin-left 替换它，以支持 RTL

.icon {
  margin-right: 1em;
}


/* or .icon:dir(rtl) */
[dir="rtl"] .icon {
  margin-right: 0;
  margin-left: 1em;
}

这是页面的一小部分。 现在想象一下用这种方式构建一个大型网站——这将是大量的工作！ 但逻辑属性通过为我们考虑书写模式，使其变得轻而易举。 例如，我们可以将边距添加到元素的末尾，无论它在哪里

.icon {
  margin-inline-end: 1em;
}

这就是我们指代逻辑属性时所指的意思——它们是相对于书写模式的，而不是相对于物理方向的。 看看使用逻辑属性多么合乎逻辑？

内边距逻辑属性

因此，了解了逻辑属性，这里有四个额外的内边距子属性

逻辑属性	水平流等效	它的作用
inset-block-start	top	指定与书写方向垂直的方向上起始边的偏移量。
inset-block-end	bottom	指定与书写方向垂直的方向上结束边的偏移量。
inset-inline-start	left	指定书写方向上起始边的偏移量，映射到根据元素的书写模式、方向和文本方向确定的物理偏移量。
inset-inline-end	right	指定书写方向上结束边的偏移量。

我们甚至可以将这四个子属性分组到两个额外的简写属性中

逻辑属性	简写为	它的作用
inset-inline	inset-inline-start inset-inline-end	接受单个值以设置 inset-inline-start 和 inset-inline-end。 还接受两个值，第一个值指定 inset-inline-start，第二个值指定 inset-inline-end。
inset-block	inset-block-start inset-block-end	接受单个值以设置 inset-block-start 和 inset-block-end。 还接受两个值，第一个值指定 inset-block-start，第二个值指定 inset-block-end。

演示

更改书写模式和内边距属性的值，以便更好地了解它们的工作原理

注意：inset 属性不是逻辑属性

尽管 inset 是 逻辑属性和值规范 的一部分，但它没有定义逻辑块或内联偏移量。 相反，它定义了物理偏移量，而不管元素的书写模式、方向和文本方向如何。 换句话说，inset 只是 top、right、bottom 和 left 的简写。

关于在 GitHub 上使用一些关键字来以逻辑方式使用此属性，有一些 讨论。

那么，我们是否仍然使用物理偏移量？ 假设您想将一个徽章或徽标固定在页面的左上角，并且无论语言如何，您都希望它位于那里。 在这种情况下，您无法使用逻辑偏移量，而需要使用物理属性。

浏览器支持

对 inset 属性的支持仍处于早期阶段。 截至撰写本文时，caniuse 估计 全球支持率为 69.43%。

桌面

Internet Explorer	Edge	Firefox	Chrome	Safari	Opera
不支持	91（功能标志）	66+	87+	14.1+	73+

移动

iOS Safari	Opera Mini	Android 浏览器	Chrome Android	Firefox Android
14.6+	?	91+	91+	89+

相关属性

• 位置
• top / right / bottom / left

更多信息

• CSS 逻辑属性和值级别 1 (规范，编辑草案)
• 理解逻辑属性和值 (Smashing Magazine)
• CSS 逻辑属性 (CSS-Tricks)