CSS外边距塌陷问题分析及解决方法

野性酷女 2023-07-12 08:54 8阅读 0赞

# 概念： #

**外边距塌陷**也称为**外边距合并** 是指两个在正常流中**相邻**（兄弟或父子关系）的**块级元素**的外边距 组合在一起变成单个外边距  
不过只有**上下外边距**才会有塌陷 左右外边距不会出现这种问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]  
对于两个嵌套关系的块元素 如果父元素没有上内边距（padding）或边框（border） 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为**两者中的较大者**  
因此可以整理出——

#### 当外边距塌陷时外边距之间的计算方式： ####

**1**、若两个值都是正数 则取较大的值  
**2**、若两个值都是负数 则取绝对值较大的值  
**3**、若一正一负 则取两个值的和

--------------------

**相邻块元素**垂直外边距的合并：  
当上下相邻的两个块元素相遇时 如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top 则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者  
这种现象被称为相邻块元素垂直外边距的合并（也称**外边距塌陷**）

**嵌套块元素**垂直外边距的合并：  
对于两个嵌套关系的块元素 如果父元素没有上内边距及边框 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者  
即使父元素的上外边距为0 也会发生合并

--------------------

# 解决方法（父元素中加入）： #

解决方法1：`1px solid transparent`  
解决方法2：`float: left`  
解决方法3：`position: absolute`  
解决方法4：`padding: 1px`  
解决方法5：`display: inline-block`  
解决方法6：`overflow: hidden`  
解决方法7：`overflow: auto`

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200307213247395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8=,size_16,color_FFFFFF,t_70