使用margin定义块元素的垂直外边距时可能会出现外边距的合并
1、相邻块元素垂直外边距的合并
(1)、当上下相邻的两个元素相遇时,如果上面的元素有下外边距(margin-bottom)
(2)、当下面的元素有上外边距(margin-top),则他们之间的垂直间距不是margin-bottom和margin-top之和
(3)、取两个值中较大者这种现象被称之为相邻块元素垂直外边距的合并(也称为外边距塌陷)
2、嵌套块元素垂直外边距的合并(塌陷)
(1)、对于两个嵌套关系的块元素,如果父元素没有上内边距及边框
(2)、父元素的上外边距会与子元素的上外边距发生合并
(3)、合并后的外边距为两者中的较大者
解决方案:
(1)、可以为父元素定义上边框(border-top:1px solid transparent)
(2)、可以为父元素定义上内边距(padding-top:1px)
(3)、可以为父元素添加overflow:hidden;
还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题。