css外边距塌陷(margin-top无效果)原因和解决办法_外边距塌陷问题

作者：凡人多烦事01 | 2024-02-22 06:46:27

踩

外边距塌陷问题

css外边距塌陷(margin-top无效果)

外边距的塌陷问题只会在垂直之间产生塌陷；水平之间不受影响的；

两个盒子的垂直外边距完全接触才会触发,一方有1px的border都不会触发。

例如：上下结构的紧贴的两个div在上边给一个margin-bottom：20px,下面给个margin-top:20px时，两个距离会变成20px,而不是他们之和40px。这就是外边距塌陷。

<style type="text/css">
		.a{
			background-color: bisque;
			width: 200px;
			height: 100px;
			margin-bottom:20px;
		}
		.b{
			margin-top:20px;
			background-color: aliceblue;
			width: 300px;
			height: 100px;
		}
		.c{
			background-color:yellow;
			height: 20px;
		}
	</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但正常人都不会这么写css,写一个就行。

大部分出问题在于嵌套的父子div。

父不管有没有自己的高度都会榻缩，与子一起下移。

父子两个容器，没有border时，边缘完全重合，我们用背景颜色表示。

<style type="text/css">
	
	.father{
		width: 300px;
		background-color: yellow;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: lightpink;
		margin-top: 20px;
	}
	
</style>
`<body>
	
    <div class="father">
    	<div class="son">
		</div>
	</div>
    
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

给子一个margin-top，此时我们可以看到父容器也一起下来了。

有border时如下图。给子一个margin-top。

<style type="text/css">
	.father{
		width: 300px;
		border: 1px solid red;
	}
	.son{
		width: 100px;
		height: 100px;
		border: 1px solid #000;
		margin-top: 20px;
	}

</style>
` 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

此时，子成功与父有了个外边距20px。

1.任意一个加border

如果不妨碍效果，给他们中任何一个加上border，有1px就不会重合，外边距也不会塌陷了。

如果需要背景颜色，border与背景颜色一致即可。

但是，有些情况下，不可以写border,我们怎么处理呢？

2.给父padding

常见的解决办法，给父加内边距padding与子产生距离，但这样会导致父的每个方向都变大一个内边距。

父的高度会发生变化。

3.给父overflow：hidden;

overflow：hidden;有解决外边距塌陷的效果。

.father{
		width: 300px;
		background-color: yellow;
		overflow: hidden;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: lightpink;
		margin-top: 20px;
	}
1
2
3
4
5
6
7
8
9
10
11

外边距的计算方式

总结，外边距的计算如下：

1，块标签与块标签之间的外边距，取最大值；
2，块标签与内联标签之间的外边距，取块的值；
3，块标签与内联块之间的外边距，取之和；
4，内联块与内联块之间的外边距，取之和；
5, 内联标签与内联块之间的外边距，取内联块；

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/128942