外边距合并的问题 及 相应的解决办法

在网页布局中，有时需要设置css设置外边距（margin）, 但是会出现css外边距合并（即重叠）的情况。什么是外边距合并的情况呐？怎么解决呐？

外边距合并

css外边距合并（重叠）是指两个垂直相邻的块级元素，当上下两个边距相遇时，外边距会产生重叠的现象，且重叠后的外边距等于其中较大者。

1、盒子嵌套

HTML：
<!-- 嵌套 -->
<div class="box">
   <div class="container">
   </div>
</div>

CSS：
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin-top: 20px;
  /* padding-top: .1px; */
  /* overflow:hidden; */
  /* overflow:auto; */
}
.container {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 10px;
}

VIEW：

嵌套盒子重叠.png
解决办法：

• 第1种方法：给外部盒子设置内边距（padding-top：.1px；）即可。
• 第2种方法：给下面的盒子设置overflow（ overflow: hidden; 或 overflow: auto; ）即可。

2、相邻盒子

HTML：
<!-- 相邻 -->
<div class="l_box">       
</div>
<div class="l_container">
</div>

CSS：
.l_box {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-bottom: 20px;
}
.l_container {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 10px;
    /* position: absolute; */
    /* float: left; */
    /* display:inline-block; */
}

VIEW：

相邻盒子重叠.png
解决办法：

• 第1种方法：给下面的盒子设置定位（position：absolute；）即可。
• 第2种方法：给下面的盒子设置浮动（float：left；）即可。
• 第3种方法：将其中任一个盒子设置为行内块元素（dispaly：inline-block；）即可。