小结CSS Margin

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