什么是margin合并?
在实际的网页开发中,我们经常会遇到一些不符合预期的情况,就比如两个div之间设置的margin会进行合并和叠加的现象,我们应该如何处理和防止这样的情况发生。
兄弟关系中的margin合并和叠加
两个上下div的margin中会进行一个合并,只显示最大的margin值,如下图
另外需要提一嘴的是,两个兄弟关系中的左右div元素设置margin,还会发生左右的margin叠加现象
父子关系中的margin合并
在嵌套关系中的两个块级元素中,只要给子元素中设置一个margin-top,这个时候父元素就会跟着子元素一起向下进行移动,这种现象也可以称之为margin的塌陷现象。
如何解决?
在兄弟关系元素中
可以使用BFC(块级格式化上下文)来进行解决,可以将两个div相互进行隔绝,形成一个独立的环境,不会相互影响。
在父子关系元素中
- 给父元素中设置一个border-top属性;
- 给父元素中设置一个padding-top属性;
- 给父元素中设置一个overflow属性,会触发BFC;
- 给父元素设置一个float,会触发BFC;
- 将子元素设置为行内块元素,修改形成塌陷的条件;