【CSS】外边距塌陷

问题背景

在移动应用页面开发中，父元素和子元素外边距合并，导致布局效果和预期不一致。

<template><view class="container"><view class="card"><p>TEST</p></view></view>
</template><style lang="scss">
.container {background-color: #cccc;height: 100vh;.card {background-color: red;margin: 50rpx auto;width: 95%;border-radius: 5px;}}</style>

什么是外边距塌陷

当两个垂直方向上的块元素外面边距相遇时，会形成一个外边距。这个外边距等于两个外边距的最大时，而不是两个外边距的相加。

外边距塌陷的情况

相邻的块级元素：当两个相邻的块级元素的上下外边距相遇时，会发生塌陷。

      .box1 {height: 300px;width: 300px;background-color: aqua;margin-bottom: 20px;}.box2 {height: 300px;width: 300px;background-color: red;margin-top: 30px;}

此时两个盒子上下两外边距是30px，不是50px

父元素与子元素：如果子元素是第一个或最后一个块级元素，并且没有边框、内边距或高度，父元素的外边距可能会塌陷。

      .parent {height: 300px;width: 300px;background-color: aqua;margin: 20px;}.child {height: 300px;width: 300px;background-color: red;margin: 30px;}

在这里，父元素的下外边距和子元素的下外边距相遇，最终父元素的外边距为30px。

如何避免外边距塌陷

• 添加边框和内边距
• 设置浮动
• 使用绝对定位（设置元素为绝对定位（position: absolute）也可以避免外边距塌陷。）
• 使用flex活grid布局