我有一个html5的视频标签,似乎5px space
在视频及其容器div元素之间有一个。
如果我将font-size: 0
容器元素(#video-container
)放进去,该空间将消失。
我知道这是的问题display: inline-block
,但与此无关。
同样,尝试在上一个关闭之前打开标签的解决方案也没有删除空格。
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>
只需添加display: block
到video
元素。video
元素默认为display: inline
,导致空白。
更新的提琴:http : //jsfiddle.net/g9t71mg6/1/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句