vant popup 中，写三个相同的div，中间有白色缝隙是为什么？

Question

<template>
  <van-popup
    v-model="myShow"
    class="cp-coupon-dialog"
  >
    <div class="cp-coupon-dialog_header"></div>
    <div class="cp-coupon-dialog_list"></div>
    <div class="cp-coupon-dialog_footer"></div>
  </van-popup>
</template>
<script>
import { Popup } from 'vant'

export default {
  name: 'CpCouponDialog',
  components: {
    [Popup.name]: Popup,
  },


  props: {
    showObj: {
      type: Object,
      default: () => ({}),
    },

    value: {
      type: Boolean,
      default: false,
    },
  },

  data () {
    return {
      myShow: false,
    }
  },

}
</script>
<style lang="scss">
.cp-coupon-dialog {
  width: 578px;

  &_header {
    width: 578px;
    height: 182px;
    background-color: black;
  }

  &_list {
    width: 578px;
    height: 182px;
    background-color: black;
  }

  &_footer {
    width: 578px;
    height: 182px;
    background-color: black;
  }
}

</style>

代码如上，页面截图为

求解

Answer 1

你用控制台查看一下吧，看下是边框还是伪类导致的