js margin作用到父元素_margin-top不是作用于父元素的原因

为什么margin-top不是作用于父元素:

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

至于margin-top属性的基本用法再简单不过，那就是设置一个对象的上外边距，看下面的代码实例:

为什么margin-top不是作用于父元素

以上代码可以将p的上边距设置为50px，一切运行良好，没有任何问题，再来看下一段代码:

蚂蚁部落

以上代码的初衷是让子元素的顶部距离父元素50px，但是事实上却并没有实现预 期的效果，而是子元素顶部紧贴父元素，并且margin-top好像转移给了父元素，让父元素产生上外边距。这其实是一个典型的外边距合并问题，但是并非 所有的浏览器都会产生这种情况，一般标准浏览器都会出现此现象，而IE6和IE7在此状态下不会出现外边距合并现象。上外边距合并出现的条件:

1.父元素的上边距与子元素的上边距之间没有border。

2.父元素的上边距与子元素的上边距之间没有非空内容。

3.父元素的上边距与子元素的上边距之间没有padding。

3.父元素和子元素中没有设置定位属性(除static和relative)、overflow(除visible)和display:inline-block等。

4.父元素或者资源都没有浮动。

注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单，只要破坏上面的一种情况就可以了。

更多关于外边距合并内容可以参阅margin外边距合并详解一章节。