保证金不会压低另一个保证金

Question

我有一系列这样的元素：

<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->

我在 h1 上有 5px 上边距，在 p 上有 10px 下边距。但最终的边距只有 10px。如果我将底部边距增加到 50 像素，将顶部边距增加到 40 像素，则总边距只有 50 像素。

总利润始终是最大利润。为什么？我该如何解决它？

Answer 1

您看到的行为称为边距崩溃，这是一种预期行为。基本上，当两个块级元素的边距接触时，它们会折叠，并且只有最大的一个会出现。

相邻之间的边距塌陷
元素。简单来说，这意味着
对于相邻的垂直块级
正常文档流中的元素，
仅元素的边距
最大保证金值为
很荣幸，而边缘
边距值较小的元素
将折叠为零。

http://reference.sitepoint.com/css/collapsingmargins

没有办法解决此问题 -您可以尝试使用 padding 来代替，或者简单地通过考虑到这一点来增加边距。