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

vant popup 中，写三个相同的div，中间有白色缝隙

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

代码如上，页面截图为

中间有灰色的缝隙，求指点

这个是代码中元素间的空格导致的，解决方法有：
1.把代码写到一行，中间不要留空格(代码不方便看)
2.三个div的父元素写font-size:0；div再设置font-size(如果没有文字内容 也可以不再设置)
3.div浮动，父元素清除浮动
4.flex布局