忽略边距值与明确使用边距值

如果未指定它们,它们将保留默认值(如果有),例如:

一 <h1> 有 margin-top:21.44px ,则, margin-bottom:21.44px

现在如果你这样设置它的边距 margin: 30px 0 0 0 顶部将是30px,其余部分将如您所料变成0px。

但另一种方法是:

不,不一样。

如果不指定边距值,则它具有默认值。

如果确实指定,则它具有您指定的值。

在您的情况下,此元素可能具有 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并检查这两个元素。

每个特定的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>