HTML中margin重合问题
margin重合有同向重合和异向重合,主要是块级元素的上下方向重合
什么是同向重合和异向重合
- 同向重合:
两个块级元素的margin在同一方向重合,这时候重叠之后的margin值由发生重叠的元素的margin最大值决定;如果其中一个出现负值,则由最大的正边距减去绝对值最大的负边距,如果没有最大正边距,则由0减去绝对值最大的负边距。 - 异向重合,即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;
}
效果图
这里由于脱标后,父元素没有高度,没被撑开,可以自己设置高度观察,检查工具刚好挡住信息,就不贴图了