盒模型margin共享问题

所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会 和其内部文档流中的第一个子元素的上边距重叠。

让父级具有“包裹性”
将父级over-flow设为hidden
将父级display设为inline-block
将父级float或absolute
改变父级的结构
给父元素设置padding
给父元素设置透明border

这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会 和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自 己“领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的 margin 它越级，假传圣旨，把自己的margin当领导的margin执行。

作者：学后台做前端
来源：CSDN
原文：https://blog.csdn.net/hahhahahaa/article/details/80676873
版权声明：本文为博主原创文章，转载请附上博文链接！