CSS盒子外边距塌陷问题的几种解决方案_css边距塌陷

盒子塌陷也就是外边距坍塌出现的原因：

1，父级元素下的第一个便签是块标签

2，使用margin或者margin-top

下面是外边距发生坍塌

可以看到我们给出的是子级的margin-top 但是并没有让我们的子级发生移动，父级却发生了向下移动，这就是发生了坍塌。

解决方案

1 给父级标签一个内边距，不使用margin等属性

可以看到用过padding-top可以将子级元素挤下来 但是却发生了撑大盒子模型的问题，我们还需要去将盒子的高度进行修改。个人觉得不是一种好的方法

2，给父级元素一个border边框

这个方法也是可以解决塌陷问题的，通过给父级便签一个边框，但是还是上面的老问题，即使是1px的边框还是使原来的盒子模型增大了，因此并不是最好的解决方法。

3.通过overflow:hidden（溢出隐藏）来解决

通过给父级元素一个overflow：hidden来解决塌陷，这个方法是非常好用的，可以完美的解决我们的坍塌问题

4，将父级元素改变为行内块元素 display：inline-block

通过将父级元素转换为行内块元素来解决我们的问题，既然是因为块级便签引起的问题，那么也许拥有一些行内样式之后就可以改变了。

5.通过浮动来解决

也可以给子级便签设置浮动，总之都是让该标签脱离标准流，之后的事情就简单了

6.通过定位来解决

这个的道理可以说和浮动的道理是一样的，大家也可以尝试下，但是不要使用绝对定位

这样方法都可以有效解决盒子外边距坍塌的问题，各种方法其实没有好坏之分，适用的才是最好的，当然肯定还有其他的方法，也希望大家可以发现之后也可以分享给我，感激不尽