Comment supprimer l'espace entre les éléments inline/inline-block ?

Question

Compte tenu de ce HTML et CSS :

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

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

Par conséquent, il y aura un espace de 4 pixels de large entre les éléments SPAN.

Démonstration : http://jsfiddle.net/dGHFV/

Je comprends pourquoi cela se produit, et je sais aussi que je peux me débarrasser de cet espace en supprimant les espaces blancs entre les éléments SPAN dans le code source HTML, comme suit :

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

Cependant, j'espérais une solution CSS qui ne nécessite pas de modifier le code source HTML.

Je sais comment résoudre ce problème avec JavaScript - en supprimant les nœuds de texte de l'élément conteneur (le paragraphe), comme suit :

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Démonstration : http://jsfiddle.net/dGHFV/1/

Mais ce problème peut-il être résolu avec le seul CSS ?

Answer 1

Vous pouvez également doit maintenant utiliser le système Flexbox pour réaliser la plupart des mises en page pour lesquelles vous avez peut-être utilisé inline-block auparavant : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Comme cette réponse est devenue assez populaire, je la réécris de manière significative.

N'oublions pas la question qui a été posée :

Comment supprimer l'espace entre éléments inline-block ? J'espérais une solution CSS qui ne nécessite pas de modifier le code source HTML. d'être modifié. Ce problème peut-il être résolu uniquement avec CSS ?

Il est Il est possible de résoudre ce problème en utilisant uniquement les CSS, mais il n'y a pas d'autre solution. complètement corrections robustes de CSS.

La solution que j'avais dans ma réponse initiale était d'ajouter font-size: 0 à l'élément parent, puis déclare un élément sensible font-size sur les enfants.

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

Cela fonctionne dans les versions récentes de tous les navigateurs modernes. Il fonctionne dans IE8. Il ne fonctionne pas dans Safari 5, mais il fait fonctionnent dans Safari 6. Safari 5 est un navigateur presque mort ( 0,33%, août 2015 ).

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

Cependant, bien que ce soit une solution raisonnable si vous besoin spécifique un correctif CSS uniquement, ce n'est pas ce que je recommande si vous êtes libre de modifier votre HTML (comme la plupart d'entre nous).

---

Voici ce que je fais, en tant que développeur web raisonnablement expérimenté, pour résoudre ce problème :

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

Oui, c'est vrai. J'enlève l'espace blanc dans le HTML entre les éléments inline-block.

C'est facile. C'est simple. Ça marche partout. C'est la solution pragmatique.

Vous devez parfois réfléchir à l'endroit où se trouvent les espaces blancs. L'ajout d'un autre élément avec JavaScript ajoutera-t-il des espaces blancs ? Non, pas si vous le faites correctement.

Partons pour un voyage magique de différentes façons de supprimer les espaces blancs, avec un nouveau HTML :

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

• Vous pouvez le faire, comme je le fais habituellement :

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

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

• Ou, ceci :

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

• Ou bien, utilisez les commentaires :

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

• Ou, si vous utilisez PHP ou autre :

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

• Ou, vous pouvez même sauter certains fermer entièrement les balises (tous les navigateurs le permettent) :

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

Maintenant que je vous ai ennuyé à mourir avec "mille façons différentes de supprimer les espaces, par thirtydot", j'espère que vous avez oublié tout ce qui concerne l'utilisation de l'espace. font-size: 0 .

Answer 2

Pour les navigateurs conformes à CSS3, il existe white-space-collapsing:discard

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

Answer 3

Aujourd'hui, nous devrions simplement utiliser Flexbox .

---

ANCIENNE RÉPONSE :

OK, bien que j'ai upvoted à la fois les font-size: 0; et le not implemented CSS3 feature réponses, après avoir essayé, j'ai découvert que aucune d'entre elles n'est une véritable solution .

En fait, il n'existe même pas de solution de rechange sans effets secondaires importants.

Puis J'ai décidé d'enlever les espaces (ce corrigé traite de cet argument) entre le inline-block de mon HTML source ( JSP ), en tournant ça :

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

à ce

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

c'est moche, mais ça marche.

Mais, attendez une minute... et si je génère mes divs à l'intérieur de Taglibs loops ( Struts2 , JSTL etc...) ?

Par exemple :

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Il n'est absolument pas envisageable de mettre tout ça en ligne, cela signifierait que

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

Ce n'est pas lisible, difficile à maintenir et à comprendre, etc.

La solution que j'ai trouvée :

utilisez les commentaires HTML pour relier la fin d'un div au début du suivant !

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

Vous obtiendrez ainsi un code lisible et correctement indenté.

Et, comme un effet secondaire positif, le HTML source bien qu'infesté de commentaires vides, sera correctement indenté ;

Prenons le premier exemple. A mon humble avis, ceci :

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

est meilleur que ça :

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Answer 4

Ajouter commentaires entre les éléments ne doit PAS comporter d'espace blanc. Pour moi, c'est plus facile que de remettre la taille de la police à zéro, puis de la remettre en place.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

Answer 5

C'est la même réponse que j'ai donnée sur le site connexe : Affichez : Bloc en ligne - Quel est cet espace ?

Il existe en fait un moyen très simple de supprimer les espaces blancs des blocs inline, qui est à la fois facile et sémantique. Il s'agit d'une police personnalisée avec des espaces de largeur nulle, qui vous permet de réduire les espaces blancs (ajoutés par le navigateur pour les éléments en ligne lorsqu'ils sont sur des lignes séparées) au niveau de la police en utilisant une police très petite. Une fois que vous avez déclaré la police, il vous suffit de modifier le paramètre font-family sur le récipient et de nouveau sur les enfants, et voilà. Comme ça :

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Adapté à votre goût. Voici un téléchargement de la police que je viens de créer dans font-forge et de convertir avec le générateur de police web FontSquirrel. Ça m'a pris 5 minutes. Le css @font-face La déclaration est incluse : police spatiale zero-width zippée . Il se trouve dans Google Drive, vous devrez donc cliquer sur Fichier > Télécharger pour l'enregistrer sur votre ordinateur. Vous devrez probablement modifier les chemins des polices si vous copiez la déclaration dans votre fichier css principal.