为什么margin-top:影响了子容器和父容器而 margin-left:只影响子容器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .content{
            width:800px;
            height:400px;
            background-color: red;        
        }
        .top{
            width:400px;
            height:200px;
            background-color: yellow;
             margin-top: 100px;
             margin-left: 200px; 
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="content">
        <div class="top"></div>
    </div>
</body>
</html>

上面有同学问过了，老师的回答是因为content没有设置边距，但是左边距也没有设置，只有子容器移动了。

编程题中的任务提示2有点不懂老师可以再讲一下吗？

慕勒0163420 2020-06-17

源自：CSS浮动 3-5 编程练习

收起

2回答

好帮手慕阿慧 2020-06-18 11:07:54

同学你好，

1、一个盒子如果没有上边距(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。所以同学设置子容器的margin-top并没有用的。

子div在父div的里面，想要让子元素相对于父元素移动，要先给父元素加上相对定位，子元素绝对定位。

参考代码如下：

2、内上边距是指padding-top，box-sizing属性用来设置内边距。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

收起回答

提问者慕勒0163420 #1

那为什么margin-left可以呢

2020-06-18 11:56:59
好帮手慕阿慧回复提问者慕勒0163420 #2

同学你好，父容器不受子容器margin-left的影响，向右移动，是因为子容器的margin-left是以父容器为参考线的。div默认没有边距。祝学习愉快~

2020-06-18 13:45:50
易萧 #3

刚刚试了下发现，只要父盒子和子盒子中，任意一个设置了绝对定位，都可以达到这个效果，所以父盒子无需设置相对定位，但我不是很明白为什么。

2020-08-19 12:05:51