我有两个 DIV,我想我有边距冲突...
<div style="margin-bottom: 10px;">Example box</div>
<div style="margin-top: 10px;">Example box</div>
它们之间有 10px,我想要 20px..有什么建议吗?
最佳答案
正如其他人已经说过的,这被称为 collapsing margins :
8 Box model - 8.3.1 Collapsing margins
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.
在这种情况下,它们是兄弟元素;因此以下内容适用:
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
float 其中一个兄弟元素将防止边距折叠:
<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; float:left;">collapsing</div>
Margins of inline-block boxes do not collapse (not even with their in-flow children).
制作一个元素 inline-block
也可以防止边距折叠:
<div style="margin-bottom: 10px;">These are NOT</div>
<div style="margin-top: 10px; display:inline-block;">collapsing</div>
假设元素不是兄弟元素,您可以将 overflow:hidden
添加到父元素,因为以下内容将适用:
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.
关于html - CSS - 2个DIV之间的边距冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21389187/