Comment réduire le fossé entre la balise vidéo HTML5

essayer cette

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

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

OriginalL'auteur sangram parmar

J'ai trouvé le lien qui donne la méthode pour résoudre ce problème, peut être utile à quelqu'un Référence : http://css-tricks.com

Publié le 21 avril 2012 par Chris Coyier

Voici l'affaire: une série de inline-block éléments formatés comme vous normalement format HTML sera d'avoir des espaces entre eux.

En d'autres termes:

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

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

:

Souvent très indésirables (vérifier le lien pour la sortie)

Nous voulons souvent les éléments bout à bout les uns contre les autres. Dans le cas de la navigation, ce qui signifie qu'il évite l'ennui, peu unclickable lacunes.

Ce n'est pas un "bug" (je ne pense pas). C'est juste le moyen de réglage des éléments sur une ligne fonctionne. Vous voulez des espaces entre les mots que vous tapez à être des espaces de droit? Les espaces entre ces blocs sont juste comme les espaces entre les mots. Ce n'est pas à dire que la spec ne pouvait pas être mis à jour-à-dire que les espaces entre les inline-block éléments devrait être rien, mais je suis assez certain que c'est une énorme boîte de pandore qui est peu susceptible de se produire.

Voici quelques façons de combattre l'écart et obtenir inline-block éléments assis directement à côté de l'autre.
Enlever les espaces

La raison pour laquelle vous obtenez les espaces est parce que, eh bien, vous avez les espaces entre les éléments (un saut de ligne et quelques onglets compte comme un espace, juste pour être clair). Réduite HTML permettra de résoudre ce problème, ou de l'une de ces astuces:

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

ou

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

ou avec des commentaires...

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

Ils sont tous très funky, mais il fait l'affaire.
Marge négative

Vous pouvez scoot les éléments en place avec négatif 4px de marge (peut être ajustée en fonction de la taille de police du parent). Apparemment c'est un problème dans les vieux IE (6 & 7), mais si vous n'avez pas de soins sur les navigateurs, au moins, vous pouvez conserver la mise en forme du code propre.

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

Ignorer la balise de fermeture

HTML5 ne se soucient pas de toute façon. Bien que vous avez obtenu d'admettre, il se sent bizarre.

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

Définir la taille de police à zéro

Un espace qui a zéro une taille de police est... une largeur égale à zéro.

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

Matt Ranger les rapports que la police-size: 0; technique a quelques problèmes sur Android. Citation: "Pré-Jellybean ne supprime pas l'espace à tous, et Jellybean a un bug où le dernier élément au hasard a un tout petit peu d'espace." Voir les résultats de recherche.
A noter aussi, si vous êtes dimensionnement des polices dans les ems, ce zéro taille de la police de chose, peut être un problème, puisque ems cascade, les enfants aussi ont zéro taille de la police. Rems serait de l'aide ici, sinon tout autre non-cascade de la police-taille de la bosse vers le haut.
Une autre étrangeté! Doug Stewart m'a montré que si vous utiliser @font-face avec cette technique, les polices de perdre l'anti-aliasing dans Safari 5.0.x. (cas de test) (capture d'écran).
Juste flotter au lieu

Peut-être qu'ils n'ont pas besoin d'être inline-block à tous, peut-être qu'ils ne peuvent tout simplement flottait une manière ou d'une autre. Qui vous permet de définir la largeur et la hauteur et de rembourrage et d'autres choses. Vous ne pouvez pas centre comme vous pouvez vous en text-align: center; le parent de inline-block éléments. Eh bien... vous kinda peut mais c'est bizarre.
Utilisez simplement flexbox au lieu

Si la prise en charge du navigateur est acceptable pour vous et ce que vous avez besoin de inline-block est de centrage, vous pouvez utiliser flexbox. Ils ne sont pas exactement interchangeables modèles d'agencement ou de quoi que ce soit, mais vous pourriez obtenir ce dont vous avez besoin.

OriginalL'auteur Thirumalai murugan