Vant Popup组件中三个div之间出现白色缝隙是什么原因？

Vant Popup组件内三个div出现缝隙的排查与解决

在使用Vant框架的Popup组件时，有时会在组件内部的三个div之间出现意想不到的白色缝隙。本文将分析此问题，并提供解决方法。

问题描述：

开发者在Popup组件内嵌套三个div，分别作为头部、内容区和底部。即便三个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><style scoped>.cp-coupon-dialog {  width: 578px;  &_header,  &_list,  &_footer {    width: 578px;    height: 182px;    background-color: black;  }}</style>

登录后复制