微信小程序多张image图片排列有空隙解决方案

使用 for 循环渲染多张image图片，图片之间会出现空隙

<view class="img-box" wx:for="{{ imgList }}" wx:key="item.id" wx:for-item="item">
    <image class="img-box-item" src="{{ item.imgUrl }}" />
</view>

即使将图片的样式设置为 display: block 图片之间也会有空隙

image {
    display: block;
}

解决方案：

1.margin-top设置负值

.img-box-item {
    margin-top: -1rpx;
}

2.font-size设置为0

.img-box-item {
    font-size: 0;
    display: block;
}

3.弹性盒子布局flex

.img-box {
   display: flex;
   flex-direction: column;
}