内边距

Avatar of Mojtaba Seyedi
Mojtaba Seyedi 发布

DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

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

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

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

语法

您可能从上面的示例中了解到,inset 遵循与 paddingmargin 相同的多值语法。 这意味着它最多可以接受四个值(用于声明 toprightbottomleft 的偏移量),最少可以接受一个值(用于声明所有四个属性的相等偏移量)。 而且,与 paddingmargin 一样,这些值以顺时针方向流动,从 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 长度,例如 pxemrem% 等。

让我们谈谈逻辑属性

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

除了 toprightbottomleft 之外,还有更多 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;
}
Illustration. Shows mocked up content flowing from left to right, where inline values start on the left and end on the right and block values start at the top and end at the bottom.

A second illustration shows the same content rotated 90 degrees. As a result, the inline values go top to bottom and the block values go from right to left.

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

内边距逻辑属性

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

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

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

逻辑属性简写为它的作用
inset-inlineinset-inline-start
inset-inline-end
接受单个值以设置 inset-inline-startinset-inline-end

还接受两个值,第一个值指定 inset-inline-start,第二个值指定 inset-inline-end
inset-blockinset-block-start
inset-block-end
接受单个值以设置 inset-block-startinset-block-end
还接受两个值,第一个值指定 inset-block-start,第二个值指定 inset-block-end

演示

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

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

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

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

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

浏览器支持

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

桌面

Internet ExplorerEdgeFirefoxChromeSafariOpera
不支持91(功能标志)66+87+14.1+73+

移动

iOS SafariOpera MiniAndroid 浏览器Chrome AndroidFirefox Android
14.6+?91+91+89+

更多信息