How to reduce the gap between HTML5 video tag

Question

How to reduce the gap between two video tag, I have tried with margin and padding its not worked any help are appreciated

DEMO

My HTML

<div class="videoTest">
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
    <video controls="controls"></video>
</div>

My CSS

.videoTest > video{
    border:1px solid red;
    margin:0;
    padding:0;    
}

Answer 1

The <video> element is an inline element by default. That's why there are gaps between them representing the whitespaces and/or line-breaks in your markup.

.videoTest > video {
    display: inline-block;
    border:1px solid red;
    margin:0;
    padding:0;    
}

.videoTest {
    font-size: 0;
}

By using font-size: 0, the line-breaks and whitespaces are being kind of ignored and you get rid of the gaps. Their size is set to 0.

Updated Fiddle

This is a common workaround when working with inline-blocks and is in some situations superior to floats when it comes to centering for example.

Answer 2

try this

http://jsfiddle.net/Ng6XU/5/

.videoTest > video{
    border:1px solid red;
    margin:0px;
    padding:0; 
    float:left;
}