为什么段落边距重叠并被忽略？

Question

我有两个页面，具有相同的布局和相同的CSS样式表，在一个页面上工作正常，另一方面，段落的边距似乎重叠并完全被忽略

由于金额问题，我无法发布所有源代码，我只想知道可能导致这种情况发生的原因。

Answer 1

边缘崩溃。

如果您有两个元素，每个元素都有margin: 10px，那么它们之间会有10px个空格，如果您预期10+10 = 20px空格，则会违反直觉。

在这种情况下，边距会崩溃，但由于<p>本身并未完全包含其文本，因此您似乎也存在高度问题。但请注意保证金如何停留在下一行的确切位置，如内容框顶部的位置？这就是你可以看到保证金已经崩溃的方法。

这是设计的。如果您想避免折叠，请尝试使用padding，而不是边距。填充不像边缘那样崩溃。