html5视频标签后的空格

Question

我有一个html5的视频标签,似乎有一个5px space视频和它的容器div元素之间.

如果我放入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>

Answer 1

只需添加display: block到video元素.video元素默认为display: inline,导致空格.

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

Answer 2

还值得注意的是，某些内嵌视频中所谓的下方或上方“空间”的原因是因为容器上定义的。因此，在视频标签的容器上设置也会删除空格line-heightline-height: 0