afficher : inline-block marge supplémentaire

Question

Je travaille avec quelques - divs qui sont définies à l' display: inline-block et un ensemble height et width. Dans le HTML, si il y a un saut de ligne après chaque div il y a un automatique 5px marge ajouter à la droite et au bas de la div.

Exemple:

<div>Some Text</div>
<div>Some Text</div>

Est-il une propriété que j'ai négligé qui va me permettre de réinitialisation automatique de la marge?

Mise à jour

De ce que j'ai trouvé il n'y a aucun moyen de supprimer la marge... sauf si vous avez tout sur la même ligne ou ajouter des commentaires pour commenter les sauts de ligne. exemple:

<div>Some Text</div><!--
--><div>Some Text</div>

Pas la meilleure solution, mais encore plus facile à lire si vous avez plusieurs lignes.

Answer 1

Éléments en ligne effets espaces blancs.

Cela ne devrait pas être une surprise, nous le voyons tous les jours par travée, forte et autres éléments inline. Définir la taille de police à zéro pour supprimer la marge supplémentaire.

Ensuite, l’exemple ressemblerait à ceci.

Une version jsfiddle de ce. http://jsfiddle.net/QtDGJ/1/

Answer 2

Les divs sont traités comme des éléments inline. Tout comme un espace ou un saut de ligne entre deux travées créerait un vide, il fait entre les blocs-inline. Vous pourriez leur donner une marge négative ou définissez `` sur le conteneur environnant.

Answer 3

Un an plus tard, suis tombé sur cette question pour un inline `` problème, mais ont trouvé une excellente solution qui peut-être s’appliquer ici.

http://robertnyman.com/2010/02/24/CSS-Display-Inline-Block-why-it-Rocks-and-why-it-sucks/

sur tous mes éléments fixe mon problème de « marge supplémentaire » dans tous les navigateurs.

Answer 4

``pour conteneur parent

(Source : https://twitter.com/garand/status/183253526313566208)

Answer 5

Le moyen le plus propre pour enlever ces espaces est par l'utilisation de float: left; :

DÉMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
    background-color: red;
    float: left;
}

J'ai ts pris en charge dans tous les nouveaux navigateurs. Jamais eu pourquoi revenir quand IE a statué beaucoup de développeurs ne sont pas faites pour poursuivre leur site fonctionne bien sur firefox/chrome, mais aujourd'hui, quand IE est en baisse de 14,3 %. de toute façon, il n'avait pas beaucoup de questions dans IE-9, même pensé que c'est pas pris en charge, par exemple la démo ci-dessus fonctionne très bien.