本文探讨了在CSS布局中，子元素的margin-top不增加而是父元素margin-top增加的问题。当调整子容器的margin-top时，实际效果是父容器的顶部距离发生了变化。为了解决这个问题，文章提到了三种解决方案：1) 给父容器添加1像素透明边框；2) 给父容器添加内边距；3) 设置父容器的overflow为hidden。这些方法都能够防止子元素的外边距影响父元素的布局。
场景：现有一个div容器，该容器内另有一div子容器：
<body>
<div class="father" style="background-color: aqua;width: 300px;height: 300px;">
<div class="son" style="background-color: red;width: 200px;height: 200px;"></div>
</div>
</body>
当对子容器外边距的top方向的距离进行调整时：
<div class="son" style="background-color: red;width: 200px;height: 200px;margin-top:100px"></div>
会发生如下现象：
可以看到，子容器的margin-top方向的距离并没有增加，而是父容器的margin-top增加了。
解决办法有：
1、加边框border；
(border:1px solid transparent;)
2、加内边距padding；
(padding:1px;)
3、加overflow：hidden属性；
以上方法都是在父容器添加，使用后都可以达到目的:
扫一扫
2882
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
