Comment éviter le remplissage du saut de ligne ?

Question

Mon plus gros problème avec le HTML est que les sauts de ligne ajoutent un tout petit peu d'espace entre les éléments. ( jsFiddle .)

Cela peut perturber les mises en page où les éléments enfants sont dimensionnés en fonction de la taille de l'élément. exactement s'adaptent à leurs parents.

J'ai lu quelque part que l'on pouvait supprimer ce remplissage implicite - tout en conservant une certaine lisibilité du code - en utilisant des commentaires comme celui-ci :

<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->

Cela fonctionne, mais je pense qu'il doit y avoir une meilleure solution. Existe-t-il d'autres moyens de contourner le remplissage par saut de ligne ?

Answer 1

Ce n'est pas "un petit peu d'espace", mais littéralement un caractère d'espace. Vous utilisez display: inline-block pour aligner vos éléments à l'horizontale, et c'est ainsi que "en ligne" fonctionne.

Si vous voulez utiliser inline-block vous devez supprimer l'espace blanc entre les éléments pendant que vous le faites.

Sinon, vous pouvez utiliser l'une des autres méthodes pour aligner horizontalement, par exemple le flottement ou le display: table-cell .

Answer 2

Une solution consisterait à utiliser un compresseur HTML avant de publier vos pages pour supprimer les espaces inutiles de votre balisage, comme dans l'exemple suivant este exemple.

D'après ce que j'ai vu, ils ont tendance à laisser toujours un espace au moins, parce qu'ils ne savent pas si vous voulez vraiment cet espace ou non, et comme les navigateurs ne considèrent que le premier espace s'il y en a plusieurs, les compresseurs laissent un espace à cet endroit.

Answer 3

Vous devriez essayer font-size:0px ; line-height:0px pour la div extérieure.

Quelque chose comme ça :

<div class="outer">
  <div class="inner">123</div>
  <div class="inner">34556</div>
</div>

<style>
.outer {
  font-size:0px;
  line-height:0px;
}

.inner {
  font-size:14px;
  line-height:16px;
  display:inline-block;
}
</style>

Answer 4

C'est parce que vous utilisez display: inline-block; para el div éléments.

Les éléments en bloc sont entourés d'un espace blanc, ce qui n'est pas le cas des éléments en ligne.

Essayez float: left; à la place.