什么是 margin 塌陷
这个问题主要分为父元素和子元素之间,以及子元素之间,下面分别来说一下。
父元素和子元素之间
通俗点说就是,在一个父元素里,你给第一个子元素设置 margin-top 或者给最后一个子元素设置 margin-bottom,会被父元素抢走,这些会作用在父元素上面,而不会直接作用在子元素上面,例如下面这个栗子:
可以看到,我们给第一个子元素设置了 margin-top 为 100px,但是发现却作用在父元素上了。

同理如果给最后一个元素设置 margin-bottom,也是作用在父元素上面了,这肯定不是我们想要的效果,在开发中,如果你也遇到过类似的问题,一起来看下如何解决吧。

如何解决?
给父元素设置以下其中之一的属性:
只需要设置这些其中之一的属性即可,不需要同时开启这些属性。
border
给父元素设置 1px 的 border
CSS
.parent
border: 1px solid red;
}

padding
给父元素设置 1px 的 padding
CSS
.parent
padding: 1px;
}

overflow:hidden
给父元素设置 overflow 为 hidden
CSS
.parent {
overflow: hidden;
background-color: grey;
}
display: flow-root(最推荐)
一个新的 display
属性的值,它可以创建无副作用的 BFC。在父级块中使用 display: flow-root
可以创建新的 BFC。
给 <div>
元素设置 display: flow-root
属性后,<div>
中的所有内容都会参与 BFC,浮动的内容不会从底部溢出。
你可以从 flow-root
这个值的名字上看出来,它创建一个新的用于流式布局的上下文,行为如同 root
(在浏览器中是 <html>
)元素。
CSS
.parent {
background-color: grey;
display: flow-root;
}
display: inline-block
给父元素设置为行内块元素
CSS
.parent {
background-color: grey;
display: inline-block;
}

使用 position:absolute 或 position:fixed
给父元素设置为绝对定位或者固定定位
CSS
.parent {
background-color: grey;
position: absolute;
}


兄弟元素之间
指的是当两个相邻的兄弟元素margin
发生重叠时,最终显示的边距值不是两者的和,而是较大的那个边距值,例如下面的:
第一个子元素设置了margin-bottom: 100px;,第二个子元素设置了margin-top: 100px; bottom和top重叠了,只会取最大的那个,也就是150px
CSS
.child1 {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 150px;
}
.child2 {
width: 100px;
height: 100px;
background-color: green;
margin-top: 100px;
}

如图所示:

总结
css 的 margin 塌陷现象通常出现在两个相邻块级元素之间或者父子元素之间,导致它们的边距合并成一个较大的边距。可以通过添加边框、内边距、或设置 overflow
属性,display属性,定位等方法来解决这一问题。