html5 的 video 标签后的空格

Posted 2023-05-07

【中文标题】html5 的 video 标签后的空格

【英文标题】：Space after html5's video tag

【发布时间】：2015-01-14 17:42:03

【问题描述】：

我有一个html5的video标签，好像video和它的容器div元素之间有一个5px space。

如果我将font-size: 0 放在容器元素（#video-container）中，空格就会消失。

我知道这是display: inline-block 的问题，但我没有这个问题。

另外，尝试在前一个关闭后打开标签的解决方案，并没有删除空格。

http://jsfiddle.net/g9t71mg6/

html, body 
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;


#wrapper 
  width: 100%;
  height: 100%;


#video-container 
  overflow: hidden;
  width: 100%;
  background: #2c5894;


#video-container video 
  width: 100%;


#turnera-container 
  float: right;
  width: 250px;
  vertical-align: top;
  height: 100%;


.turno-wrapper 
  height: 25%;
  display: table;
  width: 100%;


.turno-wrapper 
  background: #727867;


.turno 
  border: dashed 1px #FFFFFF;
  display: table-cell;
  text-align: center;
  vertical-align: middle;


.turno .numero 
  font-size: 50px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFF;


.turno .box 
  font-size: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #FFF;


#contenido-principal 
  overflow: hidden;
  height: 100%;
  /*margin-right: 250px;*/


#footer 
  background-color: #dc001e;
  height: 100%;
  width: auto;
  border: dashed 1px #FFFFFF;


#rss-container 
  height: 240px;
  font-size: 12px;


.turno-asignado-historia0 
  background: #00bc24;


.turno-asignado-historia0 .numero 
  font-size: 65px;


.turno-asignado-historia0 .box 
  font-size: 40px;


.turno-asignado-historia1 
  background: #739461;


.turno-asignado-historia2 
  background: #546947;


.turno-asignado-historia3 
  background: #34422e;


<div id="wrapper">
        <div id="turnera-container">
            <div class="turno-wrapper turno-asignado-historia0">
                <div class="turno">
                </div>
            </div>
            <div class="turno-wrapper turno-asignado-historia1">
                <div class="turno">
                </div>
            </div>
            <div class="turno-wrapper turno-asignado-historia2">
                <div class="turno">
                </div>
            </div>
            <div class="turno-wrapper turno-asignado-historia3">
                <div class="turno">
                </div>
            </div>
        </div>
        <div id="contenido-principal">
            <div id="video-container">
                <video autoplay loop="loop">
                  <source src="http://awakenvideo.org/video/UFOs/NVofu001.mp4" type="video/mp4">
                </video>
            </div>
            <div id="footer">
                <div id="rss-container">
                </div>
            </div>
        </div>
    </div>

【参考方案1】：

只需将display: block 添加到video 元素。 video 元素默认为display: inline，导致出现空格。

更新小提琴：http://jsfiddle.net/g9t71mg6/1/

【参考方案2】：

另外值得注意的是，一些inline video中所谓的“空格”低于或高于的原因是因为容器上定义了line-height。所以在视频标签的容器上设置line-height: 0也会去掉空格

【讨论】：

谢谢，花了大约 2 个小时检查所有可能的填充，我们到了。

【参考方案3】：

如果您的视频是全屏的（高度和宽度 100%），请使用属性 css：

object-fit: cover;