HTML+CSS面试题-父子级元素外边距合并问题，兄弟元素外边距合并问题？

父子级元素外边距合并问题

• 父级元素和子级元素在相同放向（top）同时设置 margin 值时，会出现合并现象；

• “标准文档流中”，竖直方向的margin不叠加，以较大的为准，给父级元素中的子级元素的竖直方向上设置 margin 时，父级元素与子级元素之间并不会产生 marign 距离。

解决方法：

• 给父级元素设置：
  • overflow: hidden;
• 给父级元素设置边框：
  • border: 1px solid transparent;
• 如果脱离标准文档流，比如盒子都浮动了或定位了，那么两个盒子之间是没有塌陷现象的。

兄弟元素外边距合并问题

兄弟元素之间上面的元素设置 margin-bottom，下面紧挨着的兄弟元素设置 margin-top，也会出现上面的现象

解决方法：

• 将外边距设置到一个元素上

以上内容均为网上收集整理，仅供参考