一、发现问题
最近写网页,自己做了一个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来调整子盒子的位置: