magin和padding,magin是什么意思

bug复现：

问题描述：
子元素想要在父级div下向下移动50像素(magin-top: 50px;)，但是结果却是，父级元素div也应用了子元素的magin属性，向下移动了50像素，与我们想要的结果不符合。

代码复现：

<!DOCTYPE html><html><head><meta charset=”utf-8″ /><title>test</title><style type=”text/css”>#father {width: 400px;height: 500px;box-sizing: inherit;/*border: 1px solid;*//*overflow:hidden;*/background: blue;}#son {width: 200px;height: 300px;background: red;margin-top: 50px;}</style></head><body style=”border: 1px solid;”><div id=”father”><div id=”son”>盒子模型</div></div></body>

结果显示：

原因分析：

一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

通俗点说：
父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素，祖先元素进行垂直外边距合并。只要给父元素（或祖先元素）设置个有效的 border或者padding就可以有效的管制子元素的margin防止它越级。

解决方式：

1、给父级元素添加 border-top: 1px soild transparent; 属性设置
2、为父元素添加 overflow：hiddend; 属性样式（让父元素成为BFC，内部布局不受外部影响）
3、为父元素或子元素申明浮动（float: left; 或者position;）
4、（推荐用法）给父元素添加伪元素

.box::before{content: “”;display: table;}

正常显示效果图：

转载原文：https://blog.csdn.net/maidu_xbd/article/details/88990539