CSS之margin塌陷问题_css margin塌陷

作者：2023面试高手 | 2024-02-22 06:38:43

踩

css margin塌陷

文章目录

1 问题引入
2 概念
3 解决方案

1 问题引入

准备如下代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin塌陷问题</title>
	<style>
		.outer {
			width: 400px;
			background-color: skyblue;
		}

		.inner1 {
			width: 100px;
			height: 100px;
			background-color: pink;
		}

		.inner2 {
			width: 100px;
			height: 100px;
			background-color: green;
		}
	</style>
</head>
<body>
<p>测试文字</p>
<div class="outer">
	<div class="inner1">inner1</div>
	<div class="inner2">inner2</div>
</div>
<p>测试文字</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

效果图如下
我们给inner1盒子设置margin-top: 50px;，让inner1盒子有一个外边距。我们发现结果并不是我们预想的那样，外边距作用在了父盒子上了。如下图。
我们再给inner2盒子设置margin-bottom: 50px;，观察效果，同样出现相同问题。

2 概念

所谓的margin塌陷问题，就是指下面的两种情况。

给第一个子元素添加上边距。
给最后一个子元素添加下边距。

3 解决方案

3.1 border(不推荐)

给父元素添加边框，如border: 1px solid red;

3.2 padding(不推荐)

给父元素添加内边距：padding: 1px;

3.3 overflow(推荐)

给父元素添加overflow: hidden;

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/128923