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