CSS - 2个DIV之间的余量冲突 [英] CSS - Margin collision between 2 DIVs

问题描述

我有两个DIV，我认为我有一个保证金冲突...

I have two DIV`s and i think I have a margin collision...

<div style="margin-bottom: 10px;">Example box</div>
<div style="margin-top: 10px;">Example box</div>

我有10px之间，我想要20px ..有建议吗？

I have 10px between them, and I want 20px.. Any suggest?

推荐答案

正如其他人已经说过的，这被称为折叠边距：

As others have already said, this is known as collapsing margins:

8框模型 - 8.3.1折叠边距

在CSS中，两个或多个框（可能是也可能不是兄弟）的邻接边距可以组合形成一个边距。

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

在这种情况下，它们是兄弟元素;因此适用：

In this case, they are sibling elements; therefore the following applies:

浮动框和任何其他框之间的边距不会折叠（即使在浮动框和其流入之间

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

浮动其中一个兄弟元素会阻止边距合拢：

Floating one of the sibling elements would prevent the margins from collapsing:

此处的示例

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; float:left;">collapsing</div>

内嵌块框的边距不会折叠in-flow children）。

Margins of inline-block boxes do not collapse (not even with their in-flow children).

创建元素 inline-block 防止边距折叠：

Making an element inline-block would also prevent the margins from collapsing:

此处的示例

<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; display:inline-block;">collapsing</div>

---

假设元素不是兄弟姐妹，向父元素添加 overflow：hidden ，如下所示：

建立新的块格式化上下文的元素的边距（例如浮动和带有可见之外的overflow的元素）不会与其流内子代折叠。

Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.

这篇关于CSS - 2个DIV之间的余量冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！