css_外边距塌陷问题
导致外边距塌陷的情况
- 两个兄弟盒子,上面的盒子设置了margin-bottom,下面的盒子设置了margin-top,实际中会取值较大的那个属性值显示在网页中。这种情况一般较为少见。这两个属性值设置一个即可解决。
- 嵌套盒子(父元素与子元素)间外边距塌陷(发生在垂直方向上的外边距合并,注意是垂直方向),解决方法如下:
-
- 方法一:给父元素加边框border
- 方法二:给父元素加内边距padding以达到类似效果
- 方法三:给父元素设置overflow:hidden
注意:脱标的盒子不会触发外边距塌陷!!!