css父元素和子元素之间margin-top的问题

问题：父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距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

转载于:https://www.cnblogs.com/wsw8384/p/10118163.html