顶部和侧面的CSS边距间距不同

Question

我希望有人可以帮助我，因为我觉得在这里提出这样的问题是相当愚蠢的。我不是网页设计师，但一直坚持创建基本布局的任务。该布局将在具有标准浏览器的集成设备上使用，因此一些特定于浏览器的CSS标签...即：-moz-border-radius将不一定需要使用IE等。

我有一个1024x768页面，我希望有几个块部分。这些部分每侧都有4px的空间。所以一个2x2的网格应该在整个网站的外面有4px的间隙（黑色），而内部的盒子之间有8px的间隙（一个盒子右边4px，左边4px，或者底部4px）一，4px在顶部，et）

当我将每个div的CSS设置为margin：4px;我得到4px的外部差距。我还在盒子的左侧和右侧之间获得了8px的水平间隙。问题是垂直间距是4px，就像其中一个四分之一框没有应用顶部或底部边距。我不认为这是应该发生的事情，所以我认为我在某处犯了一个错误。

提前致谢 - 这个地方太棒了。

Answer 1

这是由于'边缘折叠'：在最简单的情况下忽略了最小的相邻垂直边距。

Answer 2

尝试使用填充而不是边距。

两个对象之间的最大边距用作它们之间的空格。

如果object_a的边距为4，object_b的边距为6，如果将它们并排放置，则边距为6。

如果你使用填充，它会在它们周围产生更多的气泡，并结合距离。

如果object_a的填充为4，而object_b的填充为6，则如果将它们并排放置，则填充值为10。

---

更新 - 感谢@Bobby Jack

水平边距永不崩溃。只有垂直。