Box Model
要理解Collapsing Margin,首先要对CSS中的盒模型(Box Model)有所了解,简单说,如下图所示
可对照下图来理解各个部分的对应关系
css:
.content {
border: 1px solid black;
padding: 10px;
background-color: lightblue;
margin: 20px;
}
.canvas {
border: 1px solid black;
background-color: orange;
max-width: 300px;
margin: 0 auto;
}
html:
<div class="canvas">
<div class="content">
Box Model
</div>
</div>
Margin Collide
Margin Collide是指当两个相邻的tag都声明了margin以后,他们的实际的间隔距离是两者取其大,举例说明:
提供两个tag,上面的tag margin是20px,下面的tag的margin是40px,取其大,两者间距实际为40px
css:
.content1 {
border: 1px solid black;
padding: 10px;
background-color: lightblue;
margin: 20px 10px;
}
.content2 {
border: 1px solid black;
padding: 10px;
background-color: lightblue;
margin: 40px 10px;
}
.canvas {
border: 1px solid black;
background-color: yellow;
max-width: 300px;
margin: 0 auto;
}
html:
<div class="canvas">
<div class="content1">
Content1
</div>
<div class="content2">
Content2
</div>
</div>
图例:
效果图
上方tag的margin为20px,相对较小,没有触及到下面tag的border
下方tag的margin为40px,相对较大,触及到了上面tag的border
Collapsing Margin
当一个元素在另一个元素内部的时候,margin变得更加tricky
css:
.content {
border: 1px solid black;
background-color: lightblue;
margin: 30px 10px;
}
.wrapper {
max-width: 300px;
margin: 0 auto;
background-color: yellow;
}
h1 {
margin-bottom: 20px;
color: blue;
text-align: center;
}
html:
<div class="canvas">
<h1>
Collapsing Margin
</h1>
<div class="wrapper">
<div class="content">
Collapsing Content
</div>
<p>
collapsing margin is tricky
</p>
</div>
</div>
这个时候,我们给.content声明了20px的margin,但是这时margin并不是div.content和div.wrapper的margin,而是div.content和h1的margin。原因是,因为.wrapper没有声明任何的border或者padding,就会导致内部元素的margin超出当前tag变成当前tag实际的显示出来的margin
我们在css上做一个小改动
.wrapper {max-width: 300px;
margin: 0 auto;
padding: 1px;
background-color: yellow;
}
此时,div.content声明的margin就是div.content和div.wrapper的实际距离
当你出现margin显示不符合预期的时候,不妨检查一下是不是因为collapsing margin的原因造成的
其实总结概括的来说,就是border是不可穿越的,border里面的内容是受到“保护”的
代码:https://github.com/kiwiwin/css-workshop/tree/master/collapsing_margin