所谓外边距塌陷，指的是当两个嵌套的盒子的上下外边距相遇时，它们不会简单地相加，而是取两个外边距中的最大值作为它们之间的距离。也就是说，嵌套盒子的外边距不能简单地相加，而是会被折叠成一个较大的值。
这是一个嵌套在黄色盒子中的红色盒子。
上述代码中，红色盒子的上外边距为 20px，黄色盒子的下外边距为 30px，但它们之间的距离却是 30px 而非 50px。
有两种方法可以解决外边距塌陷的问题：
- 使用
padding属性代替外边距。 - 在嵌套的盒子之间添加
border。
这是一个嵌套在黄色盒子中的红色盒子。
这是一个嵌套在黄色盒子中的红色盒子。
上述代码中，大家分别使用了padding属性和border属性来分隔嵌套盒子之间的距离，避免了外边距塌陷的问题。
总之，了解外边距塌陷的原因和解决方法，对大家进行网页布局时非常有帮助。