html5视频标签之后的空格 [英] Space after html5's video tag

问题描述

我有一个html5的视频标签，看起来在视频和它的容器div元素之间有一个 5px空间。

如果我在容器元素（＃video-container ）中放入 font-size：0 ，则空间消失。

我知道这是 display：inline-block 的问题，但我没有元素

另外，尝试下一次关闭时打开标签的解决方案，并未删除该空间。

http://jsfiddle.net/g9t71mg6/

  html，body {
 margin：0; 
 padding：0; 
宽度：100％; 
身高：100％; 
} 
 
 #wrapper {
 width：100％; 
身高：100％; 
} 
 
＃video-container {
 overflow：hidden; 
宽度：100％; 
背景：＃2c5894; 
} 
 
＃video-container video {
 width：100％; 
} 
 
＃turnera-container {
 float：right; 
 width：250px; 
 vertical-align：top; 
身高：100％; 
} 
 
 .turno-wrapper {
 height：25％; 
 display：table; 
宽度：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; 
颜色：#FFF; 
} 
 
 .turno .box {
 font-size：30px; 
 font-family：Arial，Helvetica，sans-serif; 
 font-weight：bold; 
颜色：#FFF; 
} 
 
＃contenido-principal {
 overflow：hidden; 
身高：100％; 
 / * margin-right：250px; * / 
} 
 
 #footer {
 background-color：＃dc001e; 
身高：100％; 
 width：auto; 
 border：虚线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 {
背景：＃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.mp4type =video / mp4> 
< / video> 
< / div> 
< div id =footer> 
< div id =rss-container> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

只需添加 display：block 添加到视频元素。 video 元素默认为 display：inline ，导致空白。

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

I have a html5's video tag, it seems that there is a 5px space between video and its container div element.

If I put font-size: 0 in the container element (#video-container), the space disappears.

I know this is a problem of display: inline-block, but I have no elements with that.

Also, trying the solutions of opening tags next the previous closing, didn't delete the space.

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>

解决方案

Just add display: block to the video element. video elements default to display: inline, causing the whitespace.

Updated fiddle: http://jsfiddle.net/g9t71mg6/1/

这篇关于html5视频标签之后的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！