[英]Why margin of child div doesn't collapse with parent margin div
I'm trying to learn when margins are collapsing. 我正在尝试学习利润率何时下降。
I followed this article: What's the Deal with Margin Collapse? 我关注了这篇文章: 保证金崩溃的处理方法是什么? and still don't understand why the following margins don't collapse.
而且仍然不明白为什么以下边距不会崩溃。
Which rule did I break? 我违反了哪一条规则?
.container1 { background-color: red; border-style: solid; border-color: black; margin-top: 10em; } .container2 { background-color: green; border-style: solid; border-color: purple; margin-top: 10em; }
<div class="container1"> <div class="container2"> aaaaa </div> </div>
According to the Cascading Style Sheets (CSS) - The Official Difinition from W3.ORG, they said: 根据“ 层叠样式表(CSS)-W3.ORG的官方定义”,他们说:
Two margins are adjoining if and only if:
当且仅当以下情况,两个边距相邻:
....
....
- no line boxes, no clearance, no padding and no border separate them
没有线框,没有间隙,没有填充和没有边框将它们分开
...
...
In your case, try to remove the border-style: solid;
在您的情况下,请尝试删除
border-style: solid;
like this: 像这样:
.container1 {
background-color: red;
border-color: black;
margin-top: 100px;
}
.container2 {
background-color: green;
border-color: purple;
margin-top: 100px;
}
The collapsed margin will happen. 倒塌的保证金将发生。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.