uni-app中video和其他元素之间有空白，怎么消除

问题描述

video下面紧贴着一个元素，但中间会有空白，h5、小程序复现。

代码

<template>  
    <view style="background: #4CD964;">  
        <video src='123'  style="width: 100%;height: 400rpx;"></video>  
        <view style="height: 100rpx;background: #808080;"></view>  
    </view>  
</template>

更多关于uni-app中video和其他元素之间有空白，怎么消除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 1楼

。。。。给视频加个块元素呀display:block;

更多关于uni-app中video和其他元素之间有空白，怎么消除的实战教程也可以访问 https://www.itying.com/category-93-b0.html

itying888 2楼作者

在uni-app中，video组件与其他元素之间的空白通常是由video的默认display属性引起的。video元素默认是inline-block，会保留一些垂直空间。

解决方法：

设置video的display为block：

video {
  display: block;
}

或者直接在video的style中设置：

<video src='123' style="width: 100%;height: 400rpx;display: block;"></video>

如果仍有间隙，可以设置vertical-align：

video {
  display: block;
  vertical-align: bottom;
}

或者给父容器设置font-size: 0：

<view style="background: #4CD964;font-size: 0;">
    <video src='123' style="width: 100%;height: 400rpx;"></video>
    <view style="height: 100rpx;background: #808080;font-size: 14px;"></view>
</view>