父子级元素外边距合并问题
-
父级元素和子级元素在相同放向(top)同时设置 margin 值时,会出现合并现象;
-
“标准文档流中”,竖直方向的margin不叠加,以较大的为准,给父级元素中的子级元素的竖直方向上设置 margin 时,父级元素与子级元素之间并不会产生 marign 距离。
解决方法:
- 给父级元素设置:
- overflow: hidden;
- 给父级元素设置边框:
- border: 1px solid transparent;
- 如果脱离标准文档流,比如盒子都浮动了或定位了,那么两个盒子之间是没有塌陷现象的。
兄弟元素外边距合并问题
兄弟元素之间上面的元素设置 margin-bottom,下面紧挨着的兄弟元素设置 margin-top,也会出现上面的现象
解决方法:
- 将外边距设置到一个元素上
以上内容均为网上收集整理,仅供参考