Question Comment puis-je supprimer l'espace entre les éléments du bloc inline?


Compte tenu de ce code HTML et CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

En conséquence, il y aura un espace de 4 pixels entre les éléments SPAN.

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

Je comprends pourquoi cela arrive, et je sais aussi que je pourrais me débarrasser de cet espace en supprimant l'espace blanc entre les éléments SPAN dans le code source HTML, comme ceci:

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

Cependant, j'espérais une solution CSS qui ne nécessite pas le code source HTML pour être falsifiée.

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

// 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 CSS seul?


868
2018-02-22 12:41


origine


Réponses:


Puisque 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 en ligne? J'espérais   pour une solution CSS qui ne nécessite pas le code source HTML pour être   altéré. Ce problème peut-il être résolu avec CSS seul?

Il est possible de résoudre ce problème avec CSS seul, mais il n'y a pas complètement Corrections CSS robustes.

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

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

Cela fonctionne dans les versions récentes de tous les navigateurs modernes. Cela fonctionne dans IE8. Cela ne fonctionne pas dans Safari 5, mais Est-ce que travailler dans Safari 6. Safari 5 est presque un navigateur mort (0,33%, août 2015).

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

Cependant, alors que c'est une solution raisonnable si vous spécifiquement besoin un correctif CSS seulement, ce n'est pas ce que je recommande si vous êtes libre de changer votre HTML (comme la plupart d'entre nous).


C'est ce que je fais en tant que développeur web expérimenté pour résoudre ce problème:

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

Oui c'est vrai. Je supprime l'espace dans le HTML entre les éléments en-bloc-inline.

C'est facile. C'est simple. Cela fonctionne partout. C'est la solution pragmatique.

Vous devez parfois considérer avec soin d'où viendra l'espace blanc. Est-ce que l'ajout d'un autre élément avec JavaScript ajoutera des espaces? Non, pas si vous le faites correctement.

Faisons un voyage magique de différentes façons pour supprimer les espaces, 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 ca:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Ou, utilisez des commentaires:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Ou, vous pouvez même sauter certain fermeture complète des balises (tous les navigateurs sont d'accord):

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

Maintenant que je suis parti et que je t'ai ennuyé à mort avec "mille façons différentes de supprimer les espaces, par thirtydot", j'espère que tu as tout oublié font-size: 0.


Alternativement, vous peut maintenant utiliser la flexbox pour réaliser la plupart des mises en page que vous avez précédemment utilisées en ligne pour: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


846
2018-02-22 12:47



Pour les navigateurs conformes CSS3, il y a white-space-collapsing:discard 

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


139
2018-02-22 12:52



Ok, bien que j'ai upvoted à la fois le font-size: 0; et le not implemented CSS3 feature réponses, après avoir essayé, j'ai découvert que aucun d'entre eux est une vraie solution.

En fait, il n'y a même pas une solution de contournement sans effets secondaires forts.

alors J'ai décidé d'enlever les espaces (cette réponse est à propos de cet argument) entre le inline-block divs de mon HTML la source (JSP), tournant ceci:

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

pour ça

<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 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 pensable d'intégrer tout ça, ça voudrait dire

<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 à entretenir et à comprendre, etc ...

La solution que j'ai trouvée:

utiliser les commentaires HTML pour connecter la fin d'une div au début de la suivante!

<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>

De cette façon, vous aurez un code lisible et indenté correctement.

Et, comme un effet secondaire positif, le HTML source, bien qu'infesté de commentaires vides, résultera correctement en retrait;

Prenons le premier exemple, à mon avis:

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

c'est mieux que ça

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

J'espère que cela pourra aider...


77
2018-02-08 16:12



Ajouter commentaires entre les éléments pour ne pas avoir un espace blanc. Pour moi, c'est plus facile que de redéfinir la taille de la police à zéro, puis de la rétablir.

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

34
2018-03-13 12:02



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

Il existe en fait un moyen très simple de supprimer les espaces du bloc en-ligne, à la fois facile et sémantique. C'est ce qu'on appelle une police personnalisée avec des espaces de largeur nulle, qui vous permet de réduire l'espace (ajouté 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 très petite police. Une fois que vous avez déclaré la police, il vous suffit de changer font-family sur le conteneur et de retour sur les enfants, et le tour est joué. 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;
}

Costume au goût. Voici un téléchargement de la police que j'ai juste cuit dans font-forge et converti avec le générateur de webfont de FontSquirrel. Ça m'a pris toutes les 5 minutes. Le css @font-face déclaration est inclus: police d'espace zippée de largeur nulle. Dans Google Drive, vous devez cliquer sur Fichier> Télécharger pour l'enregistrer sur votre ordinateur. Vous aurez probablement besoin de changer les chemins de police si vous copiez la déclaration dans votre fichier css principal.


26
2017-12-09 14:51



Toutes les techniques d'élimination de l'espace pour display:inline-block sont des hacks méchants ...

Utilisation Flexbox 

C'est génial, résout tout ce bs en ligne, et à partir de 2017 a 98% de support du navigateur (plus si vous ne vous souciez pas des anciens IE).


26
2017-12-13 14:21



Deux autres options basées sur Module de texte CSS niveau 3 (au lieu de white-space-collapsing:discard qui avait été supprimé du projet de spécifications):

  • word-spacing: -100%;

En théorie, il devrait faire exactement ce qu'il faut - raccourcir les espaces     entre «mots» de 100% de la largeur du caractère de l'espace, c'est-à-dire     zéro. Mais semble ne pas fonctionner nulle part, malheureusement, et cela     La fonctionnalité est marquée "à risque" (elle peut également être supprimée de la spécification).

  • word-spacing: -1ch;

Il raccourcit les espaces inter-mots par la largeur du chiffre '0'. Dans une police à espacement fixe, elle doit être exactement égale à la largeur du caractère espace (et à tout autre caractère). Cela fonctionne dans Firefox 10+, Chrome 27+, et fonctionne presque dans Internet Explorer 9+.

Violon


15
2017-07-24 02:42