Vant Popup中三个相同Div之间出现缝隙是什么原因？

Vant Popup 组件中相同 Div 元素间隙问题分析与解决

在使用 Vant 框架的 Popup 组件时，开发者经常遇到一个问题：即使三个 Div 元素样式完全相同，且宽度、高度已精确设置，页面上仍然出现白色间隙。本文将结合代码示例分析原因并提供解决方案。

问题描述：

使用 Vant Popup 组件，包含三个相同的 Div 元素：cp-coupon-dialog_header、cp-coupon-dialog_list 和 cp-coupon-dialog_footer。这三个 Div 元素样式一致，宽度 (578px) 和高度 (182px) 相同，背景色均为黑色。但实际显示时，三个 Div 之间出现白色间隙。

代码示例：

<template>  <van-popup class="cp-coupon-dialog" v-model="myShow">    <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 scoped>.cp-coupon-dialog {  width: 578px;  &_header,  &_list,  &_footer {    width: 578px;    height: 182px;    background-color: black;  }}</style>

登录后复制