1.父子元素之间的外边距margin合并问题(外边距塌陷)
<!-- 结构 --> <div class="box"> <div class="b1"></div> </div> <!-- 样式 --> .box { width: 800px; height: 500px; background-color: orange; } .b1 { margin-top: 20px; width: 200px; height: 200px; background-color: purple; }
我们想要的效果是这样的
但实际是这样的
解决方法:
父元素添加代码段:
/*border: 1px solid transparent; !*方法1*!*/
/*float: left; !*方法2*!*/
/*position: absolute; !*方法3*!*/
/*padding: 1px; !*方法4*!*/
/*display: inline-block; !*方法5*!*/
/*overflow: hidden; !*方法6*!*/
/*overflow: auto; !*方法7*!*/
2.兄弟元素之间的外边距合并问题
<!--结构--> <div class="box1"> <div class="b2"></div> <div class="b3"></div> </div> <!--样式-->
.b2,
.b3 {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.b2 { background-color: pink; margin-bottom: 20px; } /* b2 margin-bottom 20px; b3 margin-top 30px ;本应该b2 和 b3 间隔50px */ /* 实际 只有 30px 因为外边距margin发生了合并 */ .b3 { margin-top: 30px; background-color: green; }
我们想要的效果:粉色 和 绿色间隔为50px
但实际是这样的:间隔只有 30px 因为margin发生了合并 合并后就只剩margin值较大的部分
解决方法:
<!--增加左浮动 或 转换为行内块--> /*float: left; !* 1.设置左浮动 解决外边距margin 合并问题呢*! */ /*display: inline-block; !*2.转换为行内块 解决外边距margin 合并问题*!*/