margin塌陷问题解决方案

前言

margin是css的外边距属性，用来定义元素周围的空间，常常用于定义div盒子的外边距。如图所示，表示盒子的外边距为8px。正常情况下设置margin的值时，应该是父元素相对浏览器的定位，子元素相对父元素定位，而我们常常会碰到给子元素设置margin值无效问题，这就被称为margin的塌陷问题，今天就和大家分享解决margin塌陷的方法。

margin属性

具体用法

1. margin:10px 20px 30px 40px;    表示上边距10px,右边距20px，下边距30px，左边距40px。

2. margin:10px 20px 40px;    表示上边距10px,左右外边距20px，左边距40px。

3. margin:10px 20px;    表示上下外边距10px,左右外边距20px。

4. margin:40px;    表示上下左右外边距40px。

代码实现

html代码

<div class="parent">
    <div class="children">
    </div>
</div>

css代码

.parent {
    width: 300px;
    height: 200px;
    background-color: skyblue;
}
.children {
    width: 200px;
    height: 100px;
    background-color: orange;
}

实现截图

margin塌陷分析

1. 给parent盒子设置margin-top:100px;给children盒子同样设置margin-top:100px;如下图所示，只有父盒子相对于浏览器顶部有100px的外边距，而子盒子相对父盒子顶部的100px则没有实现。 代码如下：

css代码解读复制代码.parent {     width: 300px;     height: 200px;     background-color: skyblue;     margin-top: 100px; } .children {     width: 200px;     height: 100px;     background-color: orange;     margin-top: 100px; }

效果图：

2. 给子盒子设置margin-top:300px;，大于父盒子的高度时，子盒子就会不再相对于父元素定位了而是带着父盒子一起相对于浏览器定位向下移动300px。这是由于父子嵌套盒子垂直方向的 margin，父子盒子是结合在一起的，他们两个会取其中最大的值

代码如下：

.parent {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    margin-top: 100px;
}
.children {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin-top: 100px;
}

效果图：

解决方法

1. 通过给父盒子设置绝对定位或者固定定位position:absolute;，position:fixed;

2. 设置成行内块级元素(父盒子、子盒子均可)display:inline-block;

3. 利用浮动(父盒子、子盒子均可)float:lef;t和float:right;

4. 通过给父盒子添加overflow:hidden,将溢出盒子的部分隐藏展示

5. 为父盒子设定padding值(不推荐)

6. 为父盒子添加display:table

7. 利用伪元素给父元素前面添加一个空元素

.parent::before {
    content: '';
    display: table;
}

7. 实现效果

【结语】以上方法是作者用来解决margin塌陷几种常用方案，如有其他解决方案欢迎评论区留言交流。创作不易，欢迎点赞收藏。