CSS边距表示法（顶部，右侧，底部，左侧）

Question

我写作under the impression：

  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; 是[顶部]，[左和右]右]，[底]。