我有一个HTML5的视频标签,似乎在视频和它的容器5px space元素之间有一个div。
如果我在容器元素(#video-container)中放入font-size: 0,空格就消失了。
我知道这是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>发布于 2014-11-18 02:11:36
只需在video元素中添加display: block即可。video元素缺省为display: inline,导致出现空格。
更新的fiddle:http://jsfiddle.net/g9t71mg6/1/
https://stackoverflow.com/questions/26979003
复制相似问题