一、发现问题

最近写网页，自己做了一个demo，发现了一个曾经没有发现的问题，子div margin-top会影响父元素的div位置。子div的margin-top会变成父div的margin-top

代码如下

#top{
    margin-top:10px;
    margin-left: 10px;
    background-color: #009a61;
    width: 100px;
    height: 100px;
    
}
#top2{
    margin-top:40px;
    margin-left: 30px;
    background-color:blue;
    width: 50px;
    height: 30px;
    
}

运行结果

可以看出父元素距离浏览器顶部的距离大于10px，等40px，所以我觉得是因为子元素影响了父元素距离顶部的距离。

二、解决问题

通过查询资料，知道了原因，因为所有毗邻的几个元素的margin会合并为一个margin，然后取最大的margin，毗邻的定义为：同级或者其嵌套的元素，并且他们之间没有非空内容、Padding或者border分割。（在设置子div的时候，父div里面没有元素的间隔（父div没有上补白（padding-top)和上边框(border-top)),）因此，只要破坏他的出现条件就行。

解决的几种方式

1、给父元素加上“overflow：hidden”。（目前最完美）

2.在父元素的div上加上“border：1px solid transparent”（隐形的边框）

3、在父元素上加上float:left或者position：absolute。（css2.1 规定浮动元素和绝对定位不参与Margin折叠）

4.在父元素上加上padding-top代替margin的实现效果

更改之后的效果

#top{
    margin-top:10px;
    margin-left: 10px;
    background-color: #009a61;
    width: 100px;
    height: 100px;
    padding-top: 30px;
}
#top2{
   
    margin-left: 30px;
    background-color:blue;
    width: 50px;
    height: 30px;
    
}

我在原先的代码基础上将子元素的margin删除了，在父元素上增加了一个padding-top来代替子元素的margin-top。可以看出，他不影响父元素的margin-top.

 看到一句话：margin属性是描述兄弟盒子的关系。
 善于使用父盒子的padding来调整子盒子的位置：