【CSS】外边距塌陷

时间：2024-11-08 08:20:28

问题背景

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

<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布局

相关文章