用于将左右边距设置为相同值的快捷方式

Question

我很好奇以下选择器是否具有完全等效的单行速记：

.foo {
  margin-left: 30px;
  margin-right: 30px;
}

我可以使用类似：

.foo {
  margin: 0 30px;
}

但是我不清楚这是等效的，例如，如果将多个样式应用于元素，则0可能会产生不同的最终结果。

Answer 1

我不确定我是否理解您的问题。通常，auto用于居中。

浏览器选择合适的边距来使用。例如，在某些情况下这种情况下，该值可用于使元素居中。

但是初始值为0。

因此，除非您特别需要使用auto，否则需要以下内容。

.foo {
  margin: 0 30px;
}

MDN documentation解释了如何使用margin属性。

Answer 2

使用此

.foo {
  margin: 0 30px 0 30px;
}

Answer 3

inherit似乎适用于速记的顶部和底部边距，以保留以前的设置：

body {
  margin: 0;
}

.wrap {
  border: 1px solid red;
  margin: 0;
  padding: 1px;
}

.foo {
  margin-top: 50px;
  margin-bottom: 10px;
  background: blue;
  height: 10px;
}

.foo {
  margin: inherit 30px;
}

<div class="wrap">
  <div class="foo"></div>
</div>

编辑：但是：否，没有-没有应用左右边距，所以我想整个规则都无效...

（（我可能会在几分钟之内删除它）