问题描述
我有一系列像这样的元素：
I have a series of elements like this:
<h1>...</h1>
<p>.......</p>
<h1>...</h1>
<p>.......</p>
<!-- etc. -->
我在 h1上有一个5px的顶部边距 ， p 上的底部边距为10px。但是产生的边距只有10px。如果我将底边距增加到50像素，将顶边距增加到40像素，那么总边距只有50像素。
I have a 5px top margin on h1, and a 10px bottom margin on p. But the resulting margin is only 10px. And if I increase the bottom margin to 50px and the top margin to 40px, the total margin is only 50px.
总利润率始终是最大利润率。为什么？
The total margin is always whatever the biggest margin is. Why? And how can I fix it?
推荐答案
你看到的行为被称为利润率崩溃，这是一个预期的行为。基本上，当两个块级元素的边界接触时，它们崩溃，并且只有最大的一个将出现。
The behavior you're seeing is known as margin collapse, and it is an expected behavior. Basically, when the margins of two block level elements touch, they collapse, and only the largest one will appear.
没有一个修复 - 你可以尝试使用 padding ，或者只是增加边距考虑到这一点。
There is no one fix for this - you can try using padding instead, or simply increase the margins by taking this into account.
这篇关于保证金不会推下另一个保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！