DigitalOcean 为您的旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
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+ |
相关属性
更多信息
- CSS 逻辑属性和值级别 1 (规范,编辑草案)
- 理解逻辑属性和值 (Smashing Magazine)
- CSS 逻辑属性 (CSS-Tricks)