不知道大家在练习中有没有遇到过外边距塌陷的问题，今天我来总结一下解决外边距塌陷的4中方法。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>margin的兼容性</title>
</head>
<style>
.outer{
width: 300px;
height: 300px;
background-color: #ccd234;
}
.inner{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
如图所示俩个嵌套的盒子，如果想要实现黑色盒子与黄色盒子的上边分离，该怎么做呢？
其实，我首先想到的是给inner加margin-top值，但结果如下
我们会发现，大盒子里嵌套着小盒子，给小盒子加margin-top不但没有实现与大盒子之间的间距，反而把大盒子一起拽下来了
那应该怎么办呐？有四种解决方案可供参考：
1）在给子元素margin-top的基础上，给父元素加overflow:hidden;
2）在给子元素margin-top的基础上，给父元素加padding-top
3) 在给子元素margin-top的基础上,给父元素加边框 border: 1px solid transparent;（颜色是透明的）
4）给子元素的margin-top值改为给父元素的padding-top
送给同样初学者的你，希望可以帮助到您！
扫一扫
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
