CSS塌陷合并问题
我们发现两个元素上下间距并不是结构上div1的margin-bottom的值加上div2的margin-top的值100px,而是仅为60px, 它选择了上下两个元素中margin-top与margin-bottom的最大值作为两者的间距,这就是margin合并现象。
这与我们想象中的样式不一样,子级元素并没有在父级元素的右下角,它好像现对于浏览器边框定位了。我们增大子级元素的margin-top,发现当margin-top的值大于一定值时,父级元素跟着子级元素移动了一段距离。这种现象就是margin塌陷
解决办法
法1:给父元素定义上边框且设置为transparent(透明)
border-top: 1px solid transparent;
法2:给父级元素指定一个上padding
padding-top: 1px;
法3:给父级元素加 overflow:hidden;