问题：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top，父元素的盒子也会受到子元素的margin-top值的影响。
原因：所有毗邻的两个或者多个元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容。padding或者border分隔。其中float和position（css2.1浮动元素和绝对定位元素不参与margin折叠）
解决方法：
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；添加界限）
2、为父元素添加overflow：hidden；样式即可（让父元素成为BFC，内部布局不受外部影响）
3、为父元素或者子元素声明浮动（float:left或者position）（浮动元素的margin垂直方向不叠加）
4、为父元素添加border （border：1px solid transparent）（添加界限）
5、为父元素或者子元素声明绝对定位（BFC）
参考网站网站：https://www.cnblogs.com/cjw-ryh/p/6876214.html
css父元素和子元素之间margin-top的问题
原文地址：https://www.cnblogs.com/wsw8384/p/10118163.html