Comment éliminer les espaces blancs entre les éléments inline/inline-block ?

Question

Il y aura un espace de 4 pixels entre ces éléments span

span {
  affichage : bloc en ligne ;
  largeur : 100 px ;
  couleur de fond : rouge violet pâle ;
}</pré>
<pre class="brush:html;toolbar:false;"><p>
  <envergure>
  <envergure>
</p>

Démo Fiddle

Je sais que je peux supprimer cet espace en supprimant l'espace entre les éléments span

   Foo 

≪/pré>
Je recherche une solution CSS qui n'implique pas : 

Modifier le HTML. ≪/li>
Utilisez JavaScript. ≪/li>

            

Answer 1

Pour les navigateurs compatibles CSS3, vous pouvez utiliser la white-space-collapsing:discardpropriété

Voir : http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Answer 2

Vous pouvez également utiliser flexbox pour réaliser de nombreuses mises en page que vous auriez pu réaliser auparavant en utilisant le bloc en ligne : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Comme cette réponse est devenue très populaire, je la réécris.

N'oublions pas la vraie question posée :

Ce problème peut être résolu en utilisant uniquement CSS, mais il n'existe pas de correctif CSS complètement stable.

La solution que j'ai proposée dans ma réponse originale était d'ajouter font-size: 0，然后在子元素中声明合理的font-size dans l'élément parent.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Cela fonctionne dans les dernières versions de tous les navigateurs modernes. Cela fonctionne dans IE8. Cela ne fonctionne pas dans Safari 5 mais fonctionne dans Safari 6. Safari 5 est un navigateur presque mort (0,33%, août 2015).

La plupart des problèmes liés aux tailles de police relatives ne sont pas compliqués.

Cependant, si vous êtes libre de modifier le HTML (la plupart des gens le sont), c'est une solution raisonnable, mais pas celle que je recommanderais.

---

En tant que développeur Web expérimenté, voici comment j'ai résolu ce problème :

<p>
    <span>Foo</span><span>Bar</span>
</p>

Oui, c'est tout. J'ai supprimé les espaces dans le code HTML entre les éléments de bloc en ligne.

C'est facile. c'est très simple. Cela fonctionne partout. C'est une solution pragmatique.

Il faut parfois bien réfléchir à la provenance des espaces. Des espaces seront-ils ajoutés si j'ajoute un autre élément à l'aide de JavaScript ? Non, si vous le faites correctement.

Partons pour un voyage magique et découvrons différentes manières de supprimer des espaces, en utilisant du nouveau HTML :

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• Vous pouvez faire ce que je fais habituellement :

  <ul>
       <li>Item 1</li><li>Item 2</li><li>Item 3</li>
   </ul>

http://jsfiddle.net/thirtydot/dGHFV/1362/

• Ou faites ceci :

  <ul>
       <li>Item 1</li
       ><li>Item 2</li
       ><li>Item 3</li>
   </ul>

• Vous pouvez également utiliser les commentaires :

  <ul>
       <li>Item 1</li><!--
       --><li>Item 2</li><!--
       --><li>Item 3</li>
   </ul>

• Ou si vous utilisez PHP ou quelque chose de similaire :

  <ul>
       <li>Item 1</li><?
       ?><li>Item 2</li><?
       ?><li>Item 3</li>
   </ul>

• Alternativement, vous pouvez même omettre certaines balises de fermeture complètement (supportées par tous les navigateurs) :

  <ul>
       <li>Item 1
       <li>Item 2
       <li>Item 3
   </ul>

Maintenant que je vous ai ennuyé avec "les mille façons différentes de supprimer des espaces de trente points", j'espère que vous avez oublié font-size: 0.