解决margin塌陷的问题_margin塌陷问题及解决

margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。

1. 同级元素塌陷：上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正盒子间距离是较大的那个值。

首先写两个盒子box1，box2并为其设置样式。

* {

margin: 0;

padding: 0;

}

.box1 {

width: 200px;

height: 200px;

background-color: skyblue;

}

.box2 {

width: 200px;

height: 200px;

background-color: tomato;

}

这是box1

这是box2

效果图如下:

现在对box1设置margin-bottom:20px，对box2设置margin-top：100px;.box1 {

width: 200px;

height: 200px;

background-color: skyblue;

margin-bottom: 20px;

}

.box2 {

width: 200px;

height: 200px;

background-color: tomato;

margin-bottom: 100px;

}

正常情况下我们会认为两个盒子的间距应该为上下边距相加为120px，但事实并非如此。

由上图清晰可见两个盒子之间的间距为100px，并不是两个盒子上下边距之和，这时我们使用F12打开控制台可见如下图现象：

box2

box1

盒子box1的下边距依然存在，只是不显示了，由此可见边距小的塌陷到了边距值大的值内部，所以间距为box2的边距100px。

2. 父子元素塌陷：父子元素之间也会出现margin塌陷，(1)父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。(2)本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来(父元素的上边距0塌陷到了子元素的上边距50里面)。

.box1 {

width: 200px;

height: 200px;

background-color: skyblue;

}

.box2 {

width: 100px;

height: 100px;

background-color: tomato;

}

效果图如下：

如果我们给box1设置margin-top: 20px，box2设置margin-top: 50px，这时效果如下：

由此可见：父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。

如果我们只给子元素设置margin-top: 50px，这时效果如下：

由此可见：本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来(父元素的上边距0塌陷到了子元素的上边距50里面)。

解决方法：

(1)同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

(2)父子元素：让两个边距不要相遇，中间可以使用父元素border或padding将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用子元素的margin去设置，而是用父元素的padding挤出来。

注：水平方向没有margin塌陷。