margin外边距合并和塌陷问题

1.外边距合并问题

垂直排列的两个块级显示模式的元素,为上面的元素设置下外边距,为下面的元素设置上外边距,外边距会产生合并,当两个值相等时则外边距就是那个值,当两个值不相等时则外边距就是值大的那个值。(两个块级显示模式的元素设置为浮动后再对第一个元素设置右浮动,对第二个元素设置左浮动,不会产生合并问题)

2.外边距塌陷问题

嵌套的两个块级显示模式的元素,为内层的第一个子元素设置上外边距时,父元素会跟着子元素一起向下移动,即为外边距塌陷问题。解决方案:1.为父元素设置上边框。2.在父元素中设置overflow:hidden。3.在父元素中设置padding代替给子元素设置margin。(外边距塌陷问题不会在水平方向发生,且是两个镶嵌的块级显示模式的元素,如果内层的元素设置了浮动再设置上外边距也不会产生塌陷问题,父元素设置了浮动子元素没有设置浮动,给子元素添加上外边距也不会造成塌陷问题)

原文地址:https://www.cnblogs.com/NIFS/p/12603958.html