pc端-外边距合并

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

主要有两种情况：

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

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

   解决方案：

   尽量只给一个盒子添加margin值。

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

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

   解决方案：

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

标签：元素,合并,垂直,pc,外边,为父,margin
来源： https://blog.csdn.net/qq_45803977/article/details/120586237