CSS外边距表示法（上、右、下、左）

Question

我曾经以为写作:

在印象下

  margin-bottom: 5px; 

会和

相同。

  margin: 0px 0px 5px 0px; 

然而，这两者的行为不同。第二个不仅在底部添加了边距，还会导致一些边距出现在侧面。我正在使用Bootstrap脚手架，它会导致内容换行到新行。

查看Firebug，我看到：

    margin: 0 0 5px;

你能解释一下这里发生了什么吗？

- Derek Hill

---

从Firebug中看到：margin: 0 0 5px，这实际上是一个仅为5px的下边距，所有其他边距都为0。那么你实际上在问什么？ - CBroe

当然，你展示的这两种样式是不同的——第一种仅指定了底边距，因此所有其他的边距值在其他地方定义（如果没有在你的样式表中定义，则可能在浏览器的默认样式表中）仍然适用，而第二种则显式地设置了所有值。 - CBroe

@CBroe，你说得对。现在你这么说我完全明白了。如果你把这个作为答案（你的第二点）我会接受它。 - Derek Hill

好的，已将其添加为答案。 - CBroe

Answer 1

margin有四种简写形式：

• margin: X扩展为X X X X
• margin: X Y扩展为X Y X Y（上下为X，左右为Y）
• margin: X Y Z扩展为X Y Z Y（上为X，左右为Y，下为Z）
• margin: X Y Z T明确定义所有四个边距。

在您的情况下，您定义了X Y Z T，但是Y和T相同，因此浏览器将其简化为同义词X Y Z。

它不应该添加到侧面的边距，但需要注意的一点是，您明确将其他边距设置为零-这可能会导致问题。

- Niet the Dark Absol

---

谢谢。你说的“明确将其他边距设置为零”是什么意思？我尝试了margin: 0 0 5px 0;，但它的行为与之前相同。编辑：刚看到@CBroe的评论。现在我明白了！ - Derek Hill

Answer 2

你展示的两个样式声明是不同的：

第一个声明，margin-bottom: 5px;，只指定了底部边距，因此对于所有其他边距（顶部、左侧、右侧），在别处定义的值（如果不在你的样式表中，则可能在浏览器的默认样式表中）仍然适用，而第二个声明margin: 0px 0px 5px 0px;则明确设置了所有值。

- CBroe

Answer 3

希望这可以帮到你：

margin: 0 0 5px; 是 [上方]，[左右]，[下方]。

- Chan Chee Chiew