web-dev-qa-db-fra.com

affichage: marge supplémentaire inline-block

Je travaille avec quelques divs réglés sur display: inline-block et avoir un ensemble height et width. Dans le code HTML, s'il y a un saut de ligne après chaque div, une marge de 5 pixels est ajoutée automatiquement à la droite et au bas de la div.

Exemple:

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

Y a-t-il une propriété que j'ai négligée qui me permettra de réinitialiser la marge automatique?

Mise à jour

D'après ce que j'ai découvert, il n'y a aucun moyen de supprimer la marge ... sauf si vous avez tout sur la même ligne ou ajoutez des commentaires pour commenter les sauts de ligne. exemple:

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

Ce n'est pas la meilleure solution, mais reste plus facile à lire si vous avez plusieurs lignes.

htmlcssxhtml
133
mike

Les div sont traités comme des éléments en ligne. Tout comme un espace ou un saut de ligne entre deux étendues créerait un espace, il le fait entre des blocs en ligne. Vous pouvez leur donner une marge négative ou définir Word-spacing: -1; sur le conteneur environnant.

114
Daniel

L'espace blanc affecte les éléments en ligne .

Cela ne devrait pas être une surprise. Nous le voyons tous les jours avec des éléments d'envergure, forts et autres. Définissez la taille de la police sur zéro pour supprimer la marge supplémentaire.

.container {
  font-size: 0px;
  letter-spacing: 0px;
  Word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  Word-spacing: 2em;
}

L'exemple ressemblerait alors à ceci.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

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

116
Darwin

Un an plus tard, nous sommes tombés sur cette question pour un problème en ligne LI, mais nous avons trouvé une excellente solution qui peut s'appliquer ici.

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

vertical-align:bottom sur tous mes LI éléments a résolu mon problème de "marge supplémentaire" dans tous les navigateurs.

57
Ben

font-size: 0 vers le conteneur parent

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

20
optimiertes

Une façon plus propre de supprimer ces espaces est d'utiliser float: left;:

[~ # ~] démo [~ # ~]

HTML: 

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

CSS: 

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

C'est supporté dans tous les nouveaux navigateurs . Jamais compris pourquoi quand IE a jugé qu'un grand nombre de développeurs ne voulaient pas que leur site soit poursuivi en justice fonctionne correctement sur firefox/chrome, mais aujourd'hui, quand IE est tombé à 14,3% de toute façon, je n’avais pas beaucoup de problèmes dans IE-9, même si cela n’était pas supporté, par exemple, la démo ci-dessus fonctionne bien.

8
Kuf

Vous pouvez obtenir un espace vertical même si vous n'avez AUCUN BLANC D'ESPACE entre vos éléments inline-block.

Pour moi, cela a été causé par line-height. La solution simple était:

div.container {
    line-height: 0;
}
div.container > * {
    line-height: normal;
}
6
chowey

Pour mémoire, cette réinitialisation des marges et des marges ne me convenait pas, mais cette citation de l’un des commentaires ci-dessus s’avère cruciale et résout le problème pour moi: "Si je mets les divs sur la même ligne, c’est la marge disparaît. "

3
Enchilada

Un certain nombre de solutions de contournement pour ce problème qui impliquent un espacement des mots ou une taille de police, mais cet article suggère de supprimer la marge avec une marge droite de -4px;

http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

2
pixelator

Pouvez-vous poster un lien vers le code HTML en question?

En fin de compte, vous devriez pouvoir faire:

div {
    margin:0;
    padding: 0;
}

supprimer l'espacement. Est-ce juste dans un navigateur en particulier ou dans tous?

0
Jeepstone

Une autre solution consiste à utiliser un minifier HTML. Cela fonctionne mieux avec un processus de construction Grunt, dans lequel le code HTML peut être réduit à la volée.

Les sauts de ligne et les espaces supplémentaires sont supprimés, ce qui résout parfaitement le problème de la marge et vous permet d’écrire le balisage comme vous le souhaitez dans le IDE (no </li><li>).

0
Ben

J'ai rencontré le même problème. Ce qui m’a causé pour moi, c’est un tas de blancs (&nbsp;) que j'ai inséré. Après les avoir enlevés, le problème a été résolu.

0
JMS

Après avoir trop souvent lutté contre ce problème, j'ai trouvé une solution très élégante dans HTML 5. En HTML 5, vous ne devez pas fermer plusieurs balises (li, p, etc.); l'ambition de devenir XML est partie pour toujours. Par exemple, le moyen préféré pour faire une liste est:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

Les navigateurs DOIVENT fermer le LI et ils doivent le faire sans introduire d'espaces, ce qui résout ce problème. Si vous avez toujours la mentalité XML, vous vous sentez mal, mais une fois que vous avez surmonté ce problème, vous éviterez bien des cauchemars. Et ce n’est pas un hack, car il s’appuie sur le libellé de la spécification HTML 5. Mieux, puisque la fermeture des balises est omniprésente, je ne m'attends pas à des problèmes de compatibilité (non testés cependant). Le bonus est que les formateurs HTML gèrent cela bien.

Exemple peu élaboré: http://cssdesk.com/Ls7fK

0
Peter Kriens