HTML中margin重合问题

HTML中margin重合问题

margin重合有同向重合和异向重合，主要是块级元素的上下方向重合

什么是同向重合和异向重合

1. 同向重合:

   两个块级元素的margin在同一方向重合，这时候重叠之后的margin值由发生重叠的元素的margin最大值决定；如果其中一个出现负值，则由最大的正边距减去绝对值最大的负边距，如果没有最大正边距，则由0减去绝对值最大的负边距。

2. 异向重合，即margin-bottom和margin-top重合，此时margin的值由发生重叠的元素中margin的值较大的决定。

示例与解决办法

父元素与子元素的同向重合

HTML代码

 <div class="parent">
      <div class="child"></div>
 </div>

CSS

.parent {
      width: 100px;
      height: 100px;
      background: rgb(15, 10, 10);
      margin-top: 20px;
    }
    .child {
      width: 80px;
      height: 80px;
      margin-top: 100px;
      background: rgb(101, 177, 51);
    }

效果图

通过浏览器的检查工具发现

很明显，元素到顶部的距离就是子元素的margin-top的值，这就是同向重合

之前为了效果明显，子元素margin-top值过大，此处调为50px

解决办法也很简单，只需要给父元素加 overflow：hidden 属性即可

解决后的效果图

其他办法

给父元素最外层添加1元素边框或者1元素的padding，1px对项目影响不大

效果图

父元素与子元素的异向重合

解决办法与同向一样

兄弟元素的异向重合

HTML代码

<div class="box">
      <div class="one"></div>
      <div class="two"></div>
</div>

CSS

	.one,
    .two {
      width: 100px;
      height: 100px;
    }
    .one {
      background: #000;
      margin-bottom: 50px;
    }
    .two {
      background: #0a0;
      margin-top: 20px;
    }

效果图

由CSS可以得到整个box的高度应该是270px,但是却只有250px，这是因为两个块级元素产生了异向重合，选择了margin值大的作为了间隔

解决办法

给两个字元素添加 float：left 属性 或者使用其他脱标方法

	.one,
    .two {
      width: 100px;
      height: 100px;
      float: left;
      clear: both;
    }

效果图

这里由于脱标后，父元素没有高度，没被撑开，可以自己设置高度观察，检查工具刚好挡住信息，就不贴图了