CODEWITHSUNDEEP
csshtml5-video
Thirumalai murugan
Thirumalai murugan

Reputation: 5916

How to reduce the gap between HTML5 video tag

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;    
}

Upvotes: 7

Views: 17783

Answers (7)

Eugene Kapustin
Eugene Kapustin

Reputation: 166

I would say that in my case setting this css helped:

height:auto;

Upvotes: 1

Diego Quiros
Diego Quiros

Reputation: 59

In my case, I was using 640x480 for the video size. I changed it to 640x360 and that removed the white space above the video.

Upvotes: 0

B-Money
B-Money

Reputation: 1048

Since the video tag defaults as an inline-block element, simply make the video tag a block element in CSS. Bob's your uncle.

video {display: block;}

Upvotes: 1

Thirumalai murugan
Thirumalai murugan

Reputation: 5916

I have found the link which gives various method to solve this issue, may be helpful to some one Reference : http://css-tricks.com

Published April 21, 2012 by Chris Coyier

Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them.

In other words:

<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
</nav>

nav a {
  display: inline-block;
  padding: 5px;
  background: red;
}

Will result in:

Often highly undesirable (check the link for the output)

We often want the elements to butt up against each other. In the case of navigation, that means it avoids the awkward little unclickable gaps.

This isn't a "bug" (I don't think). It's just the way setting elements on a line works. You want spaces between words that you type to be spaces right? The spaces between these blocks are just like spaces between words. That's not to say the spec couldn't be updated to say that spaces between inline-block elements should be nothing, but I'm fairly certain that is a huge can of worms that is unlikely to ever happen.

Here's some ways to fight the gap and get inline-block elements sitting directly next to each other. Remove the spaces

The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear). Minimized HTML will solve this problem, or one of these tricks:

<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

or

<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul>

or with comments...

<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

They're all pretty funky, but it does the trick. Negative margin

You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.

nav a {
  display: inline-block;
  margin-right: -4px;
}

Skip the closing tag

HTML5 doesn't care anyway. Although you gotta admit, it feels weird.

<ul>
  <li>one
  <li>two
  <li>three
</ul>

Set the font size to zero

A space that has zero font-size is... zero width.

nav {
  font-size: 0;
}
nav a {
  font-size: 16px;
}

Matt Stow reports that the font-size: 0; technique has some problems on Android. Quote: "Pre-Jellybean does not remove the space at all, and Jellybean has a bug whereby the last element randomly has a tiny bit of space." See research. Also note, if you're sizing fonts in ems, this zero font size thing can be an issue, since ems cascade the children would also have zero font size. Rems would be of help here, otherwise any other non-cascading font-size to bump it back up. Another weirdness! Doug Stewart showed me that if you use @font-face with this technique, the fonts will lose anti-aliasing in Safari 5.0.x. (test case) (screenshot). Just float them instead

Maybe they don't need to be inline-block at all, maybe they can just be floated one way or another. That allows you to set their width and height and padding and stuff. You just can't center them like you can by text-align: center; the parent of inline-block elements. Well... you kinda can but it's weird. Just use flexbox instead

If the browser support is acceptable to you and what you need out of inline-block is centering, you could use flexbox. They aren't exactly interchangeable layout models or anything, but you might get what you need out of it.

Upvotes: 1

Kilian Stinson
Kilian Stinson

Reputation: 2394

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.

Upvotes: 14

Falguni Panchal
Falguni Panchal

Reputation: 8981

TRY THIS CSS :

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

Upvotes: 3

sangram parmar
sangram parmar

Reputation: 8726

try this

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

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

Upvotes: 3

Related Questions