使用margin定义垂直外边距时,可能会出现外边距的合并。
1. 相邻块元素垂直外边距合并
当:上面的块元素有margin-bottom,下面的块元素有margin-top时,之间的margin会以较大值合并。
解决方式:尽量只给一个盒子设置margin值。
2. 嵌套块元素垂直外边距合并
当:父子两个块元素同时有margin-top时,父元素会塌陷较大的margin-top。
解决方式1:父元素定义border-top: 1px;
解决方式2:父元素定义padding-top: 1px;
解决方式3:父元素定义overflow: hidden;
其他解决方式:浮动、定位等,暂不表。