外边距合并的一些问题

  使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。PS:只有垂直方向上会产生问题

主要有两种情况:

1、相邻块元素垂直外边距的合并

  当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。

外边距合并的一些问题

解决方案:
尽量只给一个盒子添加 margin 值。

2、嵌套块元素垂直外边距的塌陷

  对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

外边距合并的一些问题

解决方案:

  • 可以为父元素定义上边框。
  • 可以为父元素定义上内边距。
  • 可以为父元素添加 overflow:hidden。