外边距margin融合(重叠)的解决办法

相邻或者嵌套的盒模型之间没有非空内容,边框等情况下上下 margin 会发生融合的现象.嵌套的话子级的margin会传递到父级后融合.

解决办法:

1.給父级边框(给子级加不起作用).

2.給子级或者父级的 display 设为 inline-block.

3.給父级设置 overflow:hidden

上述的第三种情况如果不想让父级 overflow:hidden的话,可以用伪类.

parentDiv::after{
      content: "";
      display: block;
      overflow: hidden;
}

*****CSS 外边距 margin 的解释CSS 外边距合并