保证金不会推下另一个保证金 [英] Margin does not push down another margin

问题描述

我有一系列像这样的元素：

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.

相邻
元素之间的边距折叠。简单来说，这意味着
对于正常文档流中的相邻垂直块级别的
元素，
只有元素的边际，
的最大边际值将是
荣誉，而
元素的保证金与较低保证金值
的保证金将折合为零。

Margins collapse between adjacent elements. In simple terms, this means that for adjacent vertical block-level elements in the normal document flow, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero.

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

没有一个修复 - 你可以尝试使用 padding ，或者只是增加边距考虑到这一点。

There is no one fix for this - you can try using padding instead, or simply increase the margins by taking this into account.

这篇关于保证金不会推下另一个保证金的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！