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>
- 效果图如下
- 我们给
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;
2228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
