请问为什么在没有设置border属性的情况下，margin会无法居中？

Question

        <style>
            body{
                padding : 50px;
            }
            .parent{
                width : 50px;
                height : 50px;
                background-color : white;
                border : 1px solid white;
            }
            .parent:hover{
                width : 50px;
                height : 50px;
                background-color : orange;
                border : 1px solid white;
            }
            .child{
                width : 44px;
                height : 44px;
                background-color : white;
                margin : 3px;
            }
        </style>

下面这张图是没有border属性的情况下用hover选择器改变的背景色

这张图是有border属性的情况下用hover选择器改变的背景色

Answer 1

这个就是css定义的margin折叠机制，如果你的父元素也使用了，折叠机制会避免出现双份的margin，对于布局是有好处的，浏览器也是这样解析的，所有现代的浏览器都支持这种机制，但是再开发中我们又想要双份的margin，css提供了overflow:auto,所以你只要在父元素中使用它即可，这种自带的margin折叠机制关闭的方案。建议不要使用border，padding这些可以阻止margin折叠机制的方案，除非你的设计中刚好用到了boder，padding。

Answer 2

https://www.cnblogs.com/huang...

已找到答案.

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。