margin塌陷问题解决方案一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情

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

margin属性

属性	使用说明
margin-top	上边距
margin-bottom	下边距
margin-left	左边距
margin-right	右边距
auto	浏览器计算外边距
%	基于父元素的宽度的百分比的外边距
inherit	规定应该从父元素继承外边距

具体用法

margin:10px 20px 30px 40px; 表示上边距10px,右边距20px，下边距30px，左边距40px。
margin:10px 20px 40px; 表示上边距10px,左右外边距20px，左边距40px。
margin:10px 20px; 表示上下外边距10px,左右外边距20px。
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塌陷分析

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

.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;
}
.children {
    width: 200px;
    height: 100px;
    background-color: orange;
    margin-top: 300px;
}

效果图：

解决方法

通过给父盒子设置绝对定位或者固定定位position:absolute;，position:fixed;
设置成行内块级元素(父盒子、子盒子均可)display:inline-block;
利用浮动(父盒子、子盒子均可)float:lef;t和float:right;
通过给父盒子添加overflow:hidden,将溢出盒子的部分隐藏展示
为父盒子设定padding值(不推荐)
为父盒子添加display:table
利用伪元素给父元素前面添加一个空元素

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

实现效果

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

【往期分享】