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


1068

Compte tenu de ce 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 de large entre les éléments SPAN.

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

Je comprends pourquoi cela se produit et je sais également 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 de falsification du 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 ceci:

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

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

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


Voir ma réponse dans cette question pour un ensemble complet d'options pertinentes maintenant: stackoverflow.com/questions/14630061/…
ktamlyn


Réponses:


1006

Puisque cette réponse est devenue plutôt populaire, je la réécris de manière significative.

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

Comment supprimer l'espace entre les éléments de bloc en ligne ? J'espérais une solution CSS qui ne nécessite pas de falsification du code source HTML. 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 de correctifs CSS complètement robustes.

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

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

Cela fonctionne dans les versions récentes de tous les navigateurs modernes. Cela fonctionne dans IE8. Il ne fonctionne pas dans Safari 5, mais il fait le travail dans Safari 6. Safari 5 est près d' un navigateur mort ( 0,33%, Août ici à 2015 ).

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

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


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

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

Oui c'est vrai. Je supprime les espaces dans le HTML entre les éléments de bloc en ligne.

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

Vous devez parfois considérer attentivement d'où viendront les espaces blancs. L'ajout d'un autre élément avec JavaScript ajoutera-t-il des espaces? Non, pas si vous le faites correctement.

Allons sur 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 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, si vous utilisez PHP ou similaire:

    <ul>
        <li>Item 1</li><?
        ?><li>Item 2</li><?
        ?><li>Item 3</li>
    </ul>
  • Ou, vous pouvez même ignorer complètement certaines balises de fermeture (tous les navigateurs conviennent):

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

Maintenant que je suis allé vous ennuyer à mort avec "mille façons différentes de supprimer les espaces blancs, par thirtydot", j'espère que vous avez tout oublié font-size: 0.


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


7
Il fonctionne dans FF3.6, IE9RC, O11, Ch9. Cependant, dans Safari 5, il reste encore un écart de 1px:(
Šime Vidas

7
@thirtydot Pourriez-vous consulter le commentaire de cette réponse . Il se pourrait que cette font-size:0astuce ne soit pas une si bonne idée après tout ...
Šime Vidas

25
Je sais que l'affiche recherche une solution CSS, mais cette solution - qui est de loin la plus votée (30 voix contre 5 au moment où j'écris ceci) - a de forts effets secondaires et ne fonctionne même pas sur plusieurs navigateurs. À ce stade, il est plus pragmatique de supprimer simplement les espaces problématiques dans votre code HTML.
Steph Thirion

10
cette solution ne fonctionne que si vous ne travaillez pas avec des EM pour la taille de vos conteneurs
meo

6
Cela casse les éléments enfants avec des tailles de police relatives.
Daniel

156

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


Souhaitez-vous pas utiliser trim-innerplutôt que discard?
spb le

49
Cela a été supprimé du niveau de texte 3, mais le niveau de texte 4 l'a été . C'est déjà 2016 et toujours pas de support. text-space-collapse:discard
Oriol

1
@MrLister: D'autres solutions ne fonctionnent pas dans tous les cas. Par exemple, je ne connais aucune solution, qui supprimera l'espace de fin <p>A long text...</p>, où les balises d'ouverture et de fermeture se trouvent sur des lignes distinctes du contenu du texte. C'est quelque chose que je fais tout le temps pour garder mes fichiers HTML bien rangés et lisibles.
Robert Kusznier

@Robertfloat
Mr Lister

@MrLister Floating supprime effectivement l'espace de fin, mais a de graves effets secondaires - change totalement la position de l'élément dans la disposition du conteneur. Comment puis-je faire cela, lorsque le fait de flotter un élément détruit ma disposition (ce qui est généralement le cas)?
Robert Kusznier

94

ÉDITER:

aujourd'hui, nous devrions simplement utiliser Flexbox .


ANCIENNE RÉPONSE:

D'accord, même si j'ai voté à la fois font-size: 0;pour les not implemented CSS3 featureréponses et pour les réponses, après avoir essayé, j'ai découvert qu'aucune d'entre elles n'était une vraie solution .

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

Ensuite, j'ai décidé de supprimer les espaces (cette réponse concerne cet argument) entre les inline-blockdivs de ma HTMLsource ( JSP), en 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érer mes divs 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'inclure tout ça, cela signifierait

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

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

La solution que j'ai trouvée:

utilisez 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 correctement en retrait.

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

prenons le premier exemple. À mon humble avis, ceci:

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

1
Notez que cela peut également interrompre la fonctionnalité de pliage de code dans votre éditeur.
jknotek

44

Ajoutez des commentaires entre les éléments pour NE PAS avoir d'espace blanc. Pour moi, c'est plus facile que de réinitialiser la taille de la police à zéro, puis de la rétablir.

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

C'est un hack que nous ne devrions pas utiliser en 2020: utilisez plutôt flexbox caniuse.com/#feat=flexbox
tonygatta

la réponse a été écrite en 2013. Et bien que flexbox ne soit pas une réponse à la question, celle-ci n'est pas non plus mais fonctionne aussi: stackoverflow.com/a/37512227/1019850
David

42

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

Utilisez Flexbox

Il est génial, résout tous ces bs de mise en page de bloc en ligne, et à partir de 2017 a 98% de support du navigateur (plus si vous ne vous souciez pas des anciens IE).


1
le hack peut être méchant, mais la taille de la police: 0 fonctionne sur 100% des navigateurs, et en appliquant l'affichage: inline-flex ne se débarrasse toujours pas des espaces supplémentaires, même sur un navigateur qui le prend en charge!
patrick

@patrick Flexbox résout définitivement le problème, vous le faites mal. inline-flex n'est pas destiné à afficher les éléments flex en ligne - il ne s'applique qu'aux conteneurs. Voir stackoverflow.com/a/27459133/165673
Yarin

7
"font-size: 0" ne fonctionne pas sur les navigateurs à 100%. (paramètres de navigateur de taille de police minimale). Et cette réponse est vraiment bonne.
ViliusL

35

Ajoutez display: flex;à l'élément parent. Voici la solution avec un préfixe:

Version simplifiée 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


Correction avec le préfixe 👇

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>


1
Voilà une excellente réponse! Cependant, je pense que ce serait bien de mettre la version simplifiée sur le dessus, afin que ce soit la première chose qu'un lecteur voit. Ou peut-être même supprimer la version non simplifiée.
Stefnotch

1
@Stefnotch Done ✅ Merci pour votre précieuse suggestion :-)
Mo.

31

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 blancs du bloc en ligne qui est à la fois simple et sémantique. Cela s'appelle une police personnalisée avec des espaces de largeur nulle, ce qui vous permet de réduire l'espace blanc (ajouté par le navigateur pour les éléments en ligne lorsqu'ils sont sur des lignes distinctes) au niveau de la police à l'aide d'une très petite police. Une fois que vous déclarez la police, vous changez simplement le font-familysur le conteneur et inversement 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;
}

Convient au goût. Voici un téléchargement de la police que je viens de préparer dans font-forge et convertie avec le générateur de polices Web FontSquirrel. Ça m'a pris 5 minutes. La @font-facedéclaration CSS est incluse: police d'espace zippée de largeur nulle . Il se trouve dans Google Drive, vous devrez donc cliquer sur Fichier> Télécharger pour l'enregistrer sur votre ordinateur. Vous devrez probablement également modifier les chemins de police si vous copiez la déclaration dans votre fichier CSS principal.


1
Je vous ai vu publier ceci dans CSS Tricks, je pense, et pour moi, c'est une excellente réponse. Il est léger, facile à implémenter et multi-navigateur (pour autant que mes tests l'ont montré). J'utilisais totalement flexbox jusqu'à ce que je réalise que Firefox ne prendrait pas en charge flex-wrapau moins la version 28 ( srsly? ), Mais c'est une solution de rechange parfaite jusque-là.
indextwo

16
C'est le pire cas de surpuissance que j'ai vu depuis longtemps. Télécharger une police entière juste pour supprimer un espace? Décidément.
M. Lister

3
@MrLister vous vous rendez compte qu'un tel fichier de police est minuscule? Il n'a pas de glyphes à l'intérieur. Je dirais plutôt de l'inclure de toute façon en base64 afin que nous nous débarrassions également de la demande.
Robert Koritnik

Cela a le même défaut fatal que les polices d'icônes, c'est-à-dire qu'il ne fonctionnera pas lorsque les polices Web sont bloquées (par exemple pour des raisons de bande passante ou de sécurité) ou écrasées par des polices personnalisées (par exemple pour des raisons de santé, telles que la dyslexie, etc.).
tomasz86

22

Deux autres options basées sur le module de texte CSS niveau 3 (au lieu de celles white-space-collapsing:discardqui ont été supprimées du projet de spécification):

  • word-spacing: -100%;

En théorie, il devrait faire exactement ce qui est nécessaire - raccourcir les espaces blancs entre les «mots» de 100% de la largeur des caractères de l'espace, c'est-à-dire à zéro. Mais semble ne fonctionner nulle part, malheureusement, et cette fonctionnalité est marquée «à risque» (elle peut également être supprimée de la spécification).

  • word-spacing: -1ch;

Il raccourcit les espaces entre les mots de 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 également). Cela fonctionne dans Firefox 10+, Chrome 27+ et fonctionne presque dans Internet Explorer 9+.

Violon


+1 pour l'espacement des mots, bien que -0,5ch soit la bonne valeur, avec -1ch le texte sans espaces ne sera pas lisible, -0,5ch se comporte exactement comme la taille de la police: 0; avec une taille définie explicite au niveau des éléments de texte. :)
Dennis98

6
@ Dennis98, -1ch ne fonctionne que pour les polices à espacement fixe (comme Courier New), car tous leurs caractères ont la même largeur, y compris ' 'et '0'. Dans les polices non monospaces, il n'y a pas de proportion magique parfaitement adaptée entre les largeurs ' 'et les '0'caractères, donc ce chn'est pas très utile du tout.
Ilya Streltsyn

au lieu de word-spacing, nous pourrions utiliser letter-spacingavec une grande valeur négative arbitraire comme indiqué dans ma réponse
S.Serpooshan

20

Malheureusement, nous sommes en 2019 et white-space-collapse n'est toujours pas mis en œuvre.

En attendant, donnez l'élément parent font-size: 0;et définissez le font-sizesur les enfants. Cela devrait faire l'affaire


16

Utilisez flexbox et faites un repli (à partir des suggestions ci-dessus) pour les navigateurs plus anciens:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

13

Facile:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Il n'est pas nécessaire de toucher l'élément parent.

Seule condition ici: la taille de police de l'élément ne doit pas être définie (doit être égale à la taille de police du parent).

0.25em est la valeur par défaut word-spacing

W3Schools - propriété d'espacement des mots


0.25em n'est pas "l'espacement des mots par défaut", c'est la largeur du caractère d'espacement dans la police Times New Roman qui se trouve être la police par défaut dans certains OS populaires. D'autres polices populaires comme Helvetica ont souvent un caractère d'espace plus large, il ne suffirait donc pas de supprimer 0,25 em pour éliminer les lacunes.
Ilya Streltsyn

12

taille de police: 0; peut être un peu plus difficile à gérer ...

Je pense que les quelques lignes suivantes sont bien meilleures et plus réutilisables, et font gagner du temps que toutes les autres méthodes. J'utilise personnellement ceci:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Ensuite, vous pouvez l'utiliser comme suit ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Pour autant que je sache (je peux me tromper), mais tous les navigateurs prennent en charge cette méthode.

EXPLICATION :

Cela fonctionne (peut-être que -3px peut être mieux) exactement comme vous vous attendez à ce qu'il fonctionne.

  • vous copiez et collez le code (une fois)
  • puis sur votre html, utilisez simplement class="items"le parent de chaque bloc en ligne.

Vous n'aurez PAS besoin de revenir au css et d'ajouter une autre règle css pour vos nouveaux blocs en ligne.

Résoudre deux problèmes à la fois.

Notez également le > signe (supérieur à), cela signifie que * / tous les enfants doivent être en ligne.

http://jsfiddle.net/fD5u3/

REMARQUE: j'ai modifié pour permettre d'hériter de l'espacement des lettres lorsqu'un wrapper a un wrapper enfant.


au lieu de -4pxpour letter-spacingqui peut être pas assez pour les grandes tailles de police , par exemple: voir ce violon , nous pourrions utiliser une valeur plus grande que dans mon post
S.Serpooshan

12

Cependant, techniquement pas une réponse à la question: "Comment puis-je supprimer l'espace entre les éléments de bloc en ligne?"

Vous pouvez essayer la solution flexbox et appliquer le code ci-dessous et l'espace sera supprimé.

p {
   display: flex;
   flex-direction: row;
}

Vous pouvez en savoir plus à ce sujet sur ce lien: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


Bien que techniquement ce ne soit pas une réponse à "puis-je faire cela avec le bloc en ligne" cela me semble être une solution élégante ...
Lucas

10

Je ne suis pas sûr de savoir si vous voulez créer deux travées bleues sans espace ou si vous souhaitez gérer d'autres espaces blancs, mais si vous souhaitez supprimer l'écart:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Et.. Voila.


9

En général, nous utilisons des éléments comme celui-ci dans différentes lignes, mais en cas de display:inline-block utilisation de balises sur la même ligne, l'espace sera supprimé, mais pas sur une ligne différente.

Un exemple avec des balises dans une ligne différente:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Exemple avec des balises sur la même ligne

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


Une autre méthode efficace est un travail CSS qui utilise font-size:0l'élément parent et donne font-sizeautant que vous le souhaitez à un élément enfant.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Les méthodes ci-dessus peuvent ne pas fonctionner quelque part en fonction de l'application entière, mais la dernière méthode est une solution infaillible pour cette situation et peut être utilisée n'importe où.


un inconvénient de cette méthode est que nous devons connaître et répéter la taille de police par défaut (par exemple 14px) pour la remettre à la normale dans les éléments enfants!
S.Serpooshan

8

J'ai eu ce problème en ce moment et font-size:0;j'ai découvert que dans Internet Explorer 7, le problème persiste car Internet Explorer pense "Taille de police 0?!?! WTF êtes-vous fou?" - Donc, dans mon cas, j'ai réinitialisé le CSS d'Eric Meyer et avec font-size:0.01em;une différence de 1 pixel entre Internet Explorer 7 et Firefox 9, je pense que cela peut être une solution.


7

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>


1
Bien que cet extrait de code puisse résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code. Essayez également de ne pas surcharger votre code avec des commentaires explicatifs, cela réduit la lisibilité du code et des explications!
Ashish Ahuja

Je suppose que floatet display:inline-blockpour spans étaient censés être des solutions de rechange pour le cas s'il flexn'est pas pris en charge, mais floatéliminerait effectivement l'effet de inline-block, donc ce dernier semble redondant.
Ilya Streltsyn

6

Je me suis attaqué à cela récemment et au lieu de définir le parent font-size:0puis de redonner à l'enfant une valeur raisonnable, j'ai obtenu des résultats cohérents en redéfinissant le conteneur parent letter-spacing:-.25empuis l'enfant letter-spacing:normal.

Dans un fil de discussion alternatif, j'ai vu une mention de commentateur qui font-size:0n'est pas toujours idéale parce que les gens peuvent contrôler les tailles de police minimales dans leurs navigateurs, annulant complètement la possibilité de définir la taille de police à zéro.

L'utilisation d'ems semble fonctionner indépendamment du fait que la taille de police spécifiée soit 100%, 15pt ou 36px.

http://cdpn.io/dKIjo


Dans Firefox pour Android, je vois un espace de 1 px entre les cases.
Šime Vidas

5

Je pense qu'il existe une méthode très simple / ancienne pour cela, qui est prise en charge par tous les navigateurs, même IE 6/7. Nous pourrions simplement définir letter-spacingune grande valeur négative dans parent, puis la redéfinir normalsur les éléments enfants:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */
<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>


même chose qui se passe ici, vous devez définir letter-spacing:normaltous les éléments enfants.
Gaurav Aggarwal

@GauravAggarwal mais letter-spacing99,99% des fois normal. la taille de la police n'a pas une telle valeur fixe et dépend fortement de la conception. cela pourrait être une petite valeur ou une grande valeur basée sur la famille de polices et d'autres choses ... Je ne me souviens jamais dans ma vie de voir / utiliser une valeur spéciale (autre que 0 / normale) pour letter-spacing, donc je pense que c'est plus sûr et meilleur choix
S.Serpooshan

je ne suis pas d'accord avec cela ... utiliser l'espacement des lettres à la normale avec tous les éléments et utiliser la taille de police aussi (si nécessaire) n'est pas du tout utile car vous écrivez du code double où vous devez changer la taille de la police. L'utilisation de la taille de police ne fera pas de double code et peut être utilisée pour une taille standard et toute autre taille personnalisée. Je vous suggère de faire Google et de vérifier que la taille de la police est la chose la plus acceptable de nos jours. La solution change avec le temps :)
Gaurav Aggarwal

je ne peux pas comprendre ce que vous entendez par "... et utiliser la taille de police aussi (si nécessaire) n'est pas du tout utile car vous écrivez du code double où vous devez changer la taille de la police." dans mon message, il n'y a pas de paramètre de taille de police! tout ce que j'ai fait est un espacement des lettres que personne n'a généralement mis dans son CSS (c'est toujours normal). ans comme nous ne changeons pas la taille de la police, nous n'avons pas besoin de connaître la taille de la police d'origine pour la
redéfinir

Je suppose que cette méthode n'est pas devenue populaire auparavant car elle ne fonctionnait pas dans Opera / Presto. Et actuellement, nous avons d'autres options qui n'ont pas besoin de tels workarouns, par exemple en utilisant Flexbox au lieu de blocs en ligne.
Ilya Streltsyn


3

Avec des crochets PHP:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>


2

Je vais développer un peu la réponse de user5609829 car je pense que les autres solutions ici sont trop compliquées / trop de travail. L'application de a margin-right: -4pxaux éléments de bloc en ligne supprimera l'espacement et est prise en charge par tous les navigateurs. Voir le violon mis à jour ici . Pour ceux qui souhaitent utiliser des marges négatives, essayez de lire ceci .


4
Cela ne fonctionnera pas si l'utilisateur modifie la taille de police par défaut de son navigateur. Mieux utiliser -0.25em.
Martin Schneider


1

J'ai trouvé une solution CSS pure qui fonctionnait très bien pour moi dans tous les navigateurs:

span {
    display: table-cell;
}

cette question concerne le bloc en ligne.
Madan Bhandari

@MadanBhandari correct mais il semble supprimer le besoin de tous les hacks sales.
David

1

Ajoutez white-space: nowrapà l'élément conteneur:

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

Voici le Plunker .


ne fonctionne pas sans le flotteur - qui manque dans votre plunker. Ainsi, "white-space: nowrap" ne semble jamais être une réponse efficace.
David

1

Il y a beaucoup de solutions comme font-size:0, word-spacing, margin-left, letter-spacinget ainsi de suite.

Normalement, je préfère utiliser letter-spacingcar

  1. cela semble correct lorsque nous attribuons une valeur qui est plus grande que la largeur de l'espace supplémentaire (par exemple -1em).
  2. Cependant, cela ne sera pas acceptable avec word-spacinget margin-leftlorsque nous définirons une valeur plus élevée comme -1em.
  3. L'utilisation font-sizen'est pas pratique lorsque nous essayons de l'utiliser emcomme font-sizeunité.

Donc, letter-spacingsemble être le meilleur choix.

Cependant, je dois vous avertir

lorsque vous utilisez, letter-spacingil vaut mieux utiliser -0.3emou -0.31empas les autres.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}
<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Si vous utilisez Chrome (version de test 66.0.3359.139) ou Opera (version de test 53.0.2907.99), ce que vous voyez peut être:

entrez la description de l'image ici

Si vous utilisez Firefox (60.0.2), IE10 ou Edge, ce que vous voyez peut être:

entrez la description de l'image ici

C'est intéressant. J'ai donc vérifié l' espacement des lettres mdn et j'ai trouvé ceci:

longueur

Spécifie un espace inter-caractères supplémentaire en plus de l'espace par défaut entre les caractères. Les valeurs peuvent être négatives, mais il peut y avoir des limites spécifiques à l'implémentation. Les agents utilisateurs ne peuvent pas augmenter ou diminuer davantage l'espace inter-caractères afin de justifier le texte.

Il semble que ce soit la raison.


1

Ajoutez letter-spacing:-4px;le parent pcss et ajoutez letter-spacing:0px;à votre spancss.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>


1

J'ai pensé ajouter quelque chose de nouveau à cette question car bien que la plupart des réponses actuellement fournies soient plus qu'adéquates et pertinentes, il existe de nouvelles propriétés CSS qui peuvent atteindre une sortie très propre, avec une prise en charge complète sur tous les navigateurs, et peu de pas de «hacks». Cela s'éloigne, inline-blockmais cela vous donne les mêmes résultats que la question posée.

Ces propriétés CSS sont grid

CSS Grid est hautement pris en charge ( CanIUse ) en dehors d'IE qui n'a besoin que d'un -ms-préfixe pour lui permettre de fonctionner.

CSS Grid est également très flexible, et prend toutes les bonnes parties de table, flexetinline-block les éléments et les amène en un seul endroit.

Lors de la création d'un, gridvous pouvez spécifier les espaces entre les lignes et les colonnes. L'écart par défaut est déjà défini sur 0pxmais vous pouvez changer cette valeur en ce que vous voulez.

Pour le raccourcir un peu, voici un exemple de travail pertinent:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}
<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>


Il suffit de commenter pour souligner que le contenu d'un display:gridélément est bloqué, donc ce n'est pas tellement cet affichage: la grille vous aide à travailler avec des dispositions de bloc en ligne, mais plutôt vous permet de remplacer le travail inline-blockpar quelque chose où vous pouvez contrôler les `` gouttières '' comme cette question veut. De plus, je suis vraiment surpris que personne n'ait encore répondu avec une solution CSS Grid Layout.
TylerH

Rendra plus clair que c'est un changement de inline-block. Et oui, j'ai également été surpris, je suppose que personne avec de l' gridexpérience n'était vraiment venu à cela auparavant. J'ai joué un peu avec et je suis tombé sur cette question alors j'ai pensé pourquoi pas: P
Stewartside

0

J'ai trouvé une autre façon d'appliquer la marge gauche comme valeurs négatives, sauf le premier élément de la ligne.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

0

Chaque question, qui essaie de supprimer l'espace entre les inline-blocks <table>me semble un ...

Essayez quelque chose comme ceci:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.