在Vant Popup组件的使用场景中，内部嵌套的三个div之间出现白色缝隙是比较常见的布局问题，这类问题大多和CSS样式规则、HTML元素特性相关，并非Vant Popup组件本身的缺陷。
常见原因排查
1. 空白字符导致的间隙
如果三个div是行内块元素（display: inline-block），且HTML代码中div之间存在换行、空格等空白字符，浏览器会将这些空白字符解析为一个空格，从而在div之间产生白色缝隙。
比如下面的HTML结构就可能出现该问题：
<van-popup v-model="show">
<div class="item">第一个div</div>
<div class="item">第二个div</div>
<div class="item">第三个div</div>
</van-popup>
对应的CSS如果设置了display: inline-block：
.item {
display: inline-block;
width: 100px;
height: 100px;
background: #409eff;
}
2. 默认margin或padding影响
部分CSS重置方案没有覆盖div的默认外边距或内边距，或者开发者手动给div设置了margin、padding属性，也会导致div之间出现间隙。比如给每个div设置了margin-right: 5px，最后一个div的margin可能不会被注意到，但三个div之间的累计间隙就会形成白色缝隙。
3. 父元素字体大小影响
当div设置为inline-block时，父元素的font-size属性会影响空白字符的宽度，如果父元素字体大小不为0，空白字符占据的空间就会让div之间出现缝隙。这种情况在Popup组件的默认样式中也可能出现，因为Vant Popup的根元素可能有默认的字体大小设置。
4. 边框或轮廓属性
如果给div设置了border或者outline属性，且边框颜色是白色或者和背景色一致，也可能被误认为是div之间的缝隙，实际是边框占据的空间导致的视觉误差。
对应解决方案
解决空白字符间隙
方法一：删除HTML中div之间的所有空白字符，让三个div紧挨着：
<van-popup v-model="show">
<div class="item">第一个div</div><div class="item">第二个div</div><div class="item">第三个div</div>
</van-popup>
方法二：给父元素设置font-size: 0，再给子div重新设置需要的字体大小：
.van-popup {
font-size: 0;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: #409eff;
font-size: 14px; /* 重新设置子元素字体大小 */
}
清除默认margin和padding
在CSS中添加全局重置或者针对Popup内部div的重置规则：
.van-popup div {
margin: 0;
padding: 0;
}
检查边框和轮廓
如果不需要边框，直接移除border和outline属性，或者将边框颜色设置为和div背景色一致：
.item {
border: none;
outline: none;
}
排查步骤建议
遇到这类问题时，可以按照以下步骤快速定位：
- 打开浏览器开发者工具，选中出现缝隙的区域，查看是否有空白字符占据空间
- 检查div的盒模型，查看margin、padding、border的具体数值
- 查看父元素的font-size、letter-spacing等属性是否影响子元素布局
- 临时移除所有自定义CSS，只保留Vant Popup的默认样式，判断是否是自定义样式导致的问题
通过以上方法基本可以解决Vant Popup组件中三个div之间出现白色缝隙的问题，实际开发中可以根据具体的代码场景选择对应的解决方案。