问题:当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用到父元素上边。
在做项目时遇到了这个问题,百度了一下应该是值传递的问题
解决:(通过触发BFC也可以解决)
1、在父级中添加border
例如:border:1px solid #00FFFF;
2、在父级中添加padding
例如:padding:1px;
3、推荐使用。
例如:overflow: hidden;
原因:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding或者非空内容(如一段文字),就会一层一层地合并父元素的margin-top成一个单独的margin-top。因此只要给父元素设置个有效的 border或者padding或在子元素前增加一段非空内容(如文字)就可以阻止它去合并父元素的外边距了。