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/
It is also worth noting that the reason for the so called "space" below or above in some inline video is because of the line-height
that is defined on the container. So setting line-height: 0
on the container of the video tag would also remove the space
for your video is fullscreen (height and width 100%), use propertie css:
object-fit: cover;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With