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

Question

我的印象是写：

  margin-bottom: 5px; 

将与

  margin: 0px 0px 5px 0px; 

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

看着 Firebug，我看到：

    margin: 0 0 5px;

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

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。

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

Answer 2

您显示的两种样式声明是不同的：

第一个margin-bottom: 5px;，仅指定下边距，因此对于其他地方定义的所有其他边距（上，左，右）值（如果不在您的样式表中，那么可能在浏览器的默认样式表中）仍然适用 - 而第二个，margin: 0px 0px 5px 0px;显式设置所有值。

Answer 3

希望这可以帮助：

边距：0 0 5px；是[上]、[左和右]、[下]。