二 margin合并现象
- 上下合并问题
指两个块级元素上下排列时，它们之间的边界（margin）将发生合并，也就是说，两个盒子边框之间的距离等于这个盒子margin值得较大者。
代码如下：
<div>
<div id="no1" style="margin-bottom: 20px;">块级元素1</div>
<div id="no2" style="margin-top: 10px;">块级元素2</div>
</div>展示：
- 父子元素margin合并问题
当一个元素包含在其父元素中，若父元素得边框（border）和填充（padding）为0，此时父元素和子元素得margin紧挨在一起，那么父元素得上下margin会和子元素得上下margin发生合并，但是左右margin不会发生合并现象。
代码如下：
<style>
body {
font-size: 20px;
}
#father{
background-color: yellow;
margin-top: 20px;
}
#son{
background-color: red;
margin: 10px;
}
</style>
<body>
<div id="father" >
<div id="son">内容</div>
</div>
</body>展示：
提示：如果有盒子嵌套得情况，要调整外面盒子和里面盒子得距离，尽力使用外面盒子的padding来调整，不要用里面盒子的margin，从而来避免父子元素上下margin合并现象发生。
- 左右margin不会合并
元素的左右margin等于相邻两边的margin之和，不会发生合并。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
