Question

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

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

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

Answer 1

正如其他人已经说过的那样，这被称为collapsing margins：

8 Box model - 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

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

浮动框与任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

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

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

内联块方框的边距不会崩溃（即使是流入的子节点也不会崩溃）。

制作元素inline-block也可以防止边距崩溃：

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

假设元素不是兄弟元素，您可以将overflow:hidden添加到父元素，然后将应用以下内容：

建立新的块格式化上下文的元素的边距（例如浮点数和'溢出'而不是'可见'的元素）不会因其流入的子节点而崩溃。

Answer 2

然后尝试类似这个例子：

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

Answer 3

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

Answer 4

只需为第一个div添加20px的保证金：

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

Answer 5

如果我们有两个元素，一个带边距底部，另一个带边距顶部，那么在这种情况下，浏览器将选择最大一个而不是添加两个边距。