CSS Margin塌陷（重叠）

Autooooooo

发布于 2020-11-09 10:07:26

1.5K0

发布于 2020-11-09 10:07:26

文章被收录于专栏：Coxhuang

CSS Margin塌陷（重叠）

#1 说明

#1.1 什么是Margin塌陷

在标准文档流中，竖直方向（是竖直方向，水平方向的不会出现塌陷现象）的margin会出现叠加现象，即较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin的塌陷现象。

注意: 两个盒子的垂直外边距完全接触才会触发

#1.2 塌陷情况有几种?

兄弟关系的盒子
父子关系的盒子

#2 实际操作

#2.1 兄弟关系的盒子

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

第一种情况(两个都是正数,取最大值)

<div>
	<div class="box1" style="height: 100px;width: 200px;background-color: #56b6c2;margin-bottom: 50px">
		box1
	</div>
	<div class="box2" style="height: 100px;width: 200px;background-color: #bf41b4;margin-top: 100px">
		box2
	</div>
</div>

第二种情况(两个都是负数,取绝对值最大值)

<div>
	<div class="box1" style="height: 200px;width: 400px;background-color: #56b6c2;margin-bottom: -50px">
		box1
	</div>
	<div class="box2" style="height: 50px;width: 200px;background-color: #bf41b4;margin-top: -100px">
		box2
	</div>
</div>

第三种情况(一正一负,取两数之和)

<div>
	<div class="box1" style="height: 200px;width: 400px;background-color: #56b6c2;margin-bottom: -50px">
		box1
	</div>
	<div class="box2" style="height: 50px;width: 200px;background-color: #bf41b4;margin-top: 200px">
		box2
	</div>
</div>

#2.1 父子关系的盒子

正常情况,margin=0的时候

<div>
	<div class="box" style="height: 300px;width: 300px;background-color: aquamarine">
		<div class="box-child" style="height: 100px;width: 100px;background-color: #abb2bf">

		</div>
	</div>
</div>

子标签设置 margin-top: 10px

<div>
	<div class="box" style="height: 300px;width: 300px;background-color: aquamarine">
		<div class="box-child" style="height: 100px;width: 100px;background-color: #abb2bf;margin-top: 10px">

		</div>
	</div>
</div>

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙（即父级盒子往下塌陷了10px）。 即无论给子元素设不设置margin-top值，其都不发生作用，都会作用于父元素身上

解决方法:

为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合
为父盒子设定padding值，抵消掉子元素设置margin值的方式
为父盒子添加overflow：hidden
为父盒子添加position：fixed
为父盒子添加 display：table
利用伪元素给子元素的前面添加一个空元素

<div>
	<div class="box" style="height: 300px;width: 300px;background-color: aquamarine;overflow: hidden">
		<div class="box-child" style="height: 100px;width: 100px;background-color: #abb2bf;margin-top: 10px">

		</div>
	</div>
</div>