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

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?

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/

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

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

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>

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

• Sommes-nous prêts à utiliser Flexbox?
• Utilisation des boîtes flexibles CSS - Guide du développeur Web | MDN
• Un guide complet de Flexbox | Astuces CSS
• Flexy Boxes - aire de jeux CSS flexbox et outil de génération de code

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>

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.

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

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

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

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

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.

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/

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.

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

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.

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

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>

La réponse la plus simple à cette question est d'ajouter.

css

float: left;

lien codepen: http://jsfiddle.net/dGHFV/3560/

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>

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 .

La spécification CSS Text Module Level 4 définit unetext-space-collapse propriété, qui permet de contrôler la façon dont l'espace blanc à l'intérieur et autour d'un élément est traité.

Donc, concernant votre exemple, il vous suffira d'écrire ceci:

p {
  text-space-collapse: discard;
}

Malheureusement, aucun navigateur n'implémente encore cette propriété (en septembre 2016) comme mentionné dans les commentaires à la réponse de HBP .

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

span {
    display: table-cell;
}

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 .

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:

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

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.

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>

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>

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

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>