解决HTML视频底部1px白边问题-CSDN博客

在制作网页时，发现视频元素在某些设备上底部会出现1px的白边，排查后发现并非border引起。通过调整视频样式，将display属性改为inline-block，成功消除白边。此问题在不同视频元素上表现不一，记录下来供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做网页的时候遇到的一个问题，html元素如下

 1           <div class="re-bg" >
 2               <div class="video-word face-bg">
 3                   <div class="video-center-word">
 4                       <section class="fre-wrap center-wrap">
 5                           <h2 class="move">{{_('face')}}</h2>
 6                       </section>
 7                   </div>
 8               </div>
 9               <div class="video-wrap2">
10                   <video src="{{static_url('video/1.mp4')}}" autoplay="autoplay" loop="" class="video">
11                       您的浏览器不支持本视频播放，请尽快升级
12                   </video>
13               </div>
14           </div>

css让整个视频充满.re-bg，然后vedio-word绝对定位，其中视频的样式如下：

.video-wrap2 {
    font-size: 0;
    width: 100%;
    height:100%;
}

.video{
    display:block;
    width:100%;
    height:100%;
    margin:auto;
    font-size:24px;
    object-fit: fill;
}

然后出现了一个比较奇怪的问题，在某些电脑上，视频底部出现了一条1px的白边，查看box是没有border的，缩小浏览器白边会没有，最大化的时候就出现了。另外比较奇怪的就是同样的样式用在另外一块相同大小的视频区域时完全没有这个现象。不知道原因，后面尝试把display改为inline-block，就没有白边了,在此做个记录

转载于:https://www.cnblogs.com/liziyu91/p/7574981.html