如何结合CSS属性"left"、"right"、"top"和"bottom"？

Question

我只是想知道是否有一种方法可以将CSS属性left，right，top和bottom组合在一起。

例如，如果我这样做：

top: 0;
bottom: 0;
left: 0;
right: 0;

我将能够这样做：

some-property: 0 0 0 0;

或

some-property: 0;

Answer 1

它仍然很新鲜，没有得到很好的支持，但正是你所看到的，inset: 5px， 新的 CSS 逻辑属性值： https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Answer 2

也许使用 CSS 变量定义它们，并在需要时进行更改：

.tlbr {
top:var(--v,0);
bottom:var(--v,0);
left:var(--v,0);
right:var(--v,0);
}
.box {
background:rgba(0,255,0,0.2);
position:absolute;
}

<div class="box tlbr"></div>
<div class="box tlbr" style="--v:20px"></div>
<div class="box tlbr" style="--v:-20px"></div>
<div class="box tlbr" style="--v:40px"></div>

Answer 3

不，您不能将它们组合在一起，但是如果您使用的是 sass，您可以执行以下操作：

@each $position in $positions{
#{$position}: $value;
}