CSS样式之外边距折叠
外边距
在CSS中，所有元素都是以盒模型的方式展现的，即每个元素都可以看作一个盒子。这个盒子包括元素的内容，内边距，边框，外边距。
在CSS规则里，width和height默认表示内容盒子的大小，也就是元素可渲染内容区的宽度和高度。
块盒子：即由块级元素生成的盒子。
常规块盒子中有一种机制叫做外边距折叠。即，垂直方向上 的两个外边距相遇时，会折叠形成一个外边距，折叠后的外边距的高度等于折叠前高度最大的外边距的值。
那么，引申为另一种情况，我们上面说是垂直方向上，如果两个元素为嵌套关系，那么还会不会发生外边距折叠呢？
答案是肯定的。因为垂直方向上的两个元素既包括两个相邻的块级元素，也包括嵌套关系的两个元素。
- 两个相邻元素之间的外边距折叠
#first
{
width:100px;
height: 100px;
background:orange;
margin-top:50px;
margin-bottom:50px;
margin-right:50px;
}
#second
{
width:100px;
height:100px;
background:blue;
margin-top:20px;
margin-bottom:50px;
}
<div id = "first">
你好啊，小姐姐
</div>
<div id = "second">
你好漂亮啊！
</div>
通过这两张图我们可以看到，第二个div的上外边距和第一个div的下外边距发生了折叠。
- 两个嵌套的元素
#main
{
margin-top:30px;
width:200px;
height:200px;
}
#child
{
margin-top:60px;
width:180px;
height:100px;
}
<div id = "main">
<div id = "child">
计算机科学与技术
</div>
</div>
通过这两张图可以看出，两个div的margin-top发生了折叠。
如果你个跟着运行一遍代码，你也许会发现，body的位置发生了变化，这是什么原因呢
说到这里就不得不说，嵌套的两个元素，他们的上下边距发生折叠的前提条件是：没有内边距或边框来分隔外边距。
当没有·内边距和边框分隔时，外边距发生折叠。但是，还没有结束，如果一个元素的margin-top碰不到内边距或边框来分隔，就会一层层的往上“越级”，即可看作发生转移，直到转移到可被分隔或者是根元素（body）.
在这个例子中，我们给两个div元素都设置了margin-top值，但是id为main的div并没有padding值和边框，因此会发生两个父子div的外边距折叠，最后，折叠后的margin-top会继续向上转移，因此到了body, 就导致了body的位置下移。
简单来个有边框的例子
#main
{
margin-top:30px;
width:200px;
height:200px;
border:1px solid red;
}
#child
{
margin-top:60px;
width:180px;
height:100px;
}
<div id = "main">
<div id = "child">
计算机科学与技术s
</div>
</div>
扫描二维码关注公众号，回复：
9552169 查看本文章
- 如果是一个空元素，只有外边距，没有内边距和边框，此时，上下边距接触，就会发生外边距折叠。
- 空元素的外边距遇到了其他元素的外边距，也会发生外边距折叠。
- 空元素上下边距发生折叠后，还会与另一个空元素发生折叠。
