css - 如何组合 CSS 属性“left”、“right”、“top”和“bottom”？

Question

我只是想知道是否有一种方法可以组合 CSS属性left、right和.topbottom

例如，如果我这样做：

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;
    }