省略保证金价值与明确拥有保证金

Question

如果您未指定某些保证金值（top, right, bottom or left），是否与明确标记为0相同？

例如，在我的代码库中，我看到了以下内容：

margin: 30px 0 0 0

我认为我可以改为将其重构为：

margin-top: 30px

这些是等价的吗？我的网页风格没有任何变化。

由于

Answer 1

如果您没有指定它们，则它们保留默认值（如果有），例如：

<h1>有margin-top:21.44px，margin-bottom:21.44px

现在如果你设置它的边距就像这个margin: 30px 0 0 0一样，顶部将是30px，而reste将会像你期望的那样变成0px。

但另一种方式是：

Answer 2

不，不一样。

如果不指定保证金值，则它具有默认值。

如果您指定它具有您指定的值。

在你的情况下，这个元素可能还有margin: 0。但并非总是如此。

示例：

.no-margin {
  margin: 0;
}

<h1>This has default margin top and bottom</h1>

<h1 class="no-margin"> This one has margin set to 0</h1>

要查看差异打开devtools并检查这两个元素。

Answer 3

每个特定的margin属性（以及其他属性如padding）可以表示为一个表达式：

margin: 10px 20px 30px 40px

相当于：

margin-top: 10px; 
margin-right: 20px; 
margin-bottom: 30px; 
margin-left: 40px;

如MDN WebDocs中所述：

• 当指定一个值时，它会对所有四个值应用相同的余量 两侧。
• 如果指定了两个值，则第一个边距适用于 顶部和底部，第二个向左和向右。
• 当三个值 如果指定，则第一个边距适用于顶部，第二个边距适用于 左右，第三个到底部。
• 当四个值是 指定时，边距适用于顶部，右侧，底部和左侧 那个顺序（顺时针）。

与零值相关，默认边距值不为零，因此您应该指定它，如果不是没有应用默认值，您可以在代码段中看到

div{
  border: 1px solid blue;
  width: 50px;
  height: 50px;
}

#zeroMargin {
  margin: 0;
}

#someMargin {
  margin-top: 10px;
}

#fullMargin {
  margin: 10px;
}

<div id="noMargin">
</div>

<div id="zeroMargin">
</div>

<div id="someMargin">
</div>

<div id="fullMargin">
</div>