web-dev-qa-db-fra.com

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

Étant donné 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 large de 4 pixels entre les éléments SPAN.

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

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

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

Cependant, j'espérais une solution CSS ne nécessitant pas de falsification du code source HTML.

Je sais comment résoudre cela 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émo:http://jsfiddle.net/dGHFV/1/

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

935
Šime Vidas

Depuis que 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 ne nécessitant pas d'altération 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’existe pas de correctif CSS complet .

La solution que j’avais dans ma réponse initiale consistait à ajouter font-size: 0 à l’élément parent, puis à déclarer un font-size sensible 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 il fonctionne dans Safari 6. Safari 5 est presque un navigateur mort ( .33%, août 2015 ).

La plupart des problèmes liés aux 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 de corriger uniquement les CSS, ce n’est pas ce que je vous recommande si vous êtes libre de modifier votre code HTML (comme la plupart d’entre nous). .


En tant que développeur Web raisonnablement expérimenté, voici ce que je 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 code HTML entre les éléments inline-block.

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

Vous devez parfois examiner soigneusement la provenance des espaces. L'ajout d'un autre élément avec JavaScript ajoutera-t-il des espaces? Non, pas si vous le faites correctement.

Faisons un voyage magique de différentes manières pour supprimer les espaces, avec du nouveau code 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 les 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 certains fermer complètement les balises (tous les navigateurs le permettent bien):

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

Maintenant que je vous ai ennuyé à mort avec "mille façons différentes de supprimer les espaces, par trentaine", nous espérons que vous avez tout oublié de font-size: 0.


Alternativement, vous pouvez maintenant utiliser flexbox pour réaliser de nombreuses dispositions que vous avez peut-être précédemment utilisées dans inline-block pour: https://css-tricks.com/snippets/css/a -guide-to-flexbox /

941
thirtydot

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

146
HBP

OK, bien que j’ai voté à la fois pour les réponses font-size: 0; et not implemented CSS3 feature, Après avoir essayé, j’ai découvert que aucun d’entre eux n’est une solution réelle.

En fait, il n’existe même pas une solution de contournement sans effets secondaires importants.

Puis j'ai décidé de supprimer les espaces (la réponse concerne cet argument) entre les divs inline-block de ma source HTML (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ère mes divs dans 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 ce genre de choses, cela 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 à garder et à comprendre, etc ...

La solution que j'ai trouvée: 

utilise 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 mis en retrait.

Et, comme effet secondaire positif, le HTML source, bien qu'infesté par des commentaires vides, Sera correctement mis 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>
84
Andrea Ligios

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

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

Toutes les techniques d'élimination de l'espace pour display:inline-block sont de vilains stratagèmes ... 

Utiliser Flexbox

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

30
Yarin

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

Il existe en fait un moyen très simple de supprimer les espaces blancs des blocs en ligne, à la fois simples et sémantiques. Il s’agit d’une police personnalisée avec des espaces de largeur nulle qui vous permet de réduire les espaces (ajoutés par le navigateur pour les éléments insérés s’ils se trouvent sur des lignes séparées) au niveau de la police à l’aide d’une très petite police. Une fois que vous avez déclaré la police, il vous suffit de changer le font-family sur le conteneur et de revenir 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;
}

Convenir au goût. Voici un téléchargement de la police que je viens de créer dans font-forge et convertie avec le générateur de police de caractères FontSquirrel. Ça m'a pris toutes les 5 minutes. La déclaration css @font-face est incluse: police zippée avec un espace de largeur nulle . Il se trouve dans Google Drive. Vous devez donc cliquer sur Fichier> Télécharger pour l’enregistrer sur votre ordinateur. Vous devrez probablement aussi changer les chemins des polices si vous copiez la déclaration dans votre fichier css principal.

29
Aldfrith

Ajoutez display: flex; à l'élément parent. Voici la solution avec un 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>


Mettre à jour

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>

23
Mo.

Deux options supplémentaires basées sur CSS Text Module Level 3 (au lieu de white-space-collapsing:discard qui avait été supprimé du brouillon):

  • Word-spacing: -100%;

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

  • Word-spacing: -1ch;

Il raccourcit les espaces inter-mots de la largeur du chiffre '0'. Dans une police monospace, il doit correspondre exactement à la largeur du caractère espace (et de tout autre caractère également). Cela fonctionne dans Firefox 10+, Chrome 27+ et presque dans Internet Explorer 9+.

Fiddle

18
Ilya Streltsyn

Malheureusement, c'est 2015 et white-space-collapse n'est toujours pas implémenté.

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

16
dipole_moment

Utilisez flexbox et faites une solution de remplacement (à partir des suggestions ci-dessus) pour les anciens navigateurs

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

Bien que, techniquement, pas une réponse à la question:

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 apprendre plus à ce sujet sur ce lien: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

10
Cyan Baltazar

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

Je pense que les quelques lignes suivantes sont bien meilleures et plus réutilisables et permettent de gagner du temps par rapport à d’autres méthodes. Personnellement, j'utilise 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>

Autant que je sache (je me trompe peut-être), mais tous les navigateurs prennent en charge cette méthode.

EXPLICATION:

Cela fonctionne (peut-être -3px peut-être mieux) exactement comme vous le supposeriez.

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

Vous n'aurez PAS besoin de revenir au fichier 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 > (plus grand que le signe), cela signifie que */tous les enfants doivent être inline-block.

http://jsfiddle.net/fD5u3/

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

10
Val

Simple:

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 (elle doit être égale à la taille de police du parent).

0.25em est le Word-spacing par défaut

W3Schools - Propriété d'espacement des mots

9
MA-Maddin

Généralement, nous utilisons des éléments comme celui-ci dans différentes lignes, mais dans le cas où display:inline-block, l’utilisation de balises dans la même ligne supprimera l’espace, mais pas dans une autre ligne.

Un exemple avec des balises dans une autre ligne:

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

Exemple avec des balises dans 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:0 pour l'élément parent et donne font-size à un élément enfant autant que vous le souhaitez.

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 dans son ensemble, mais la dernière méthode est une solution infaillible pour cette situation et peut être utilisée n'importe où.

7
Gaurav Aggarwal

Je ne suis pas sûr si vous voulez créer deux étendues bleues sans espace ou si vous souhaitez gérer d'autres espaces, mais si vous souhaitez supprimer cet espace

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

    float: left;
}

Et fait.

7
FlyC

J'ai eu ce problème maintenant et de font-size:0; j'ai trouvé que dans Internet Explorer 7 le problème demeure parce qu'Internet Explorer pense "Taille de police 0?!?!! WTF es-tu fou?" - Donc, dans mon cas, j'ai réinitialisé le CSS d'Eric Meyer et avec font-size:0.01em; j'ai une différence d'un pixel entre Internet Explorer 7 et Firefox 9, alors je pense que cela peut être une solution.

7
Nelson Conceição

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

Dans un autre fil de discussion, un commentateur a mentionné que font-size:0 n’était pas toujours idéal, car les utilisateurs pouvaient contrôler la taille minimale des polices dans leur navigateur, annulant ainsi totalement la possibilité de définir la taille de la police sur zéro.

L'utilisation de ems semble fonctionner que la taille de police spécifiée soit 100%, 15 pt ou 36 pixels.

http://cdpn.io/dKIjo

5
StephenESC

Je pense qu’il existe une méthode très simple/ancienne pour cela qui est supportée par tous les navigateurs même IE 6/7. Nous pourrions simplement définir letter-spacing sur une valeur négative élevée dans parent, puis le redéfinir sur normal au niveau des é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>

4
S.Serpooshan

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>

4
Autumnswind

Avec les 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
Alexufo

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

css

float: left;

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

1
Gokul

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 d'un margin-right: -4px aux é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 sont préoccupés par l’utilisation de marges négatives, essayez de donner this a read. 

1
Jrd

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 .

0
Milad

La spécification CSS Text Level Level 4 définit une propriété text-space-collapse , qui permet de contrôler le traitement de l’espace dans et autour d’un élément.

Donc, en ce qui concerne votre exemple, il vous suffira d’écrire ceci:

p {
  text-space-collapse: discard;
}

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

0
Sebastian Zartner

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

span {
    display: table-cell;
}
0
Franz Deschler

Utilisez l'une de ces astuces

  1. Supprimer les espaces
  2. Marge négative
  3. Ignorer la balise de fermeture (HTML5 ne s'en soucie pas quand même)
  4. Définissez la taille de la police sur zéro (Un espace dont la taille de police est zéro correspond à ... largeur à zéro)
  5. Utiliser la flexbox

Voir le code ci-dessous:

body {
  font-family: sans-serif;
  font-size: 16px;
}

ul {
  list-style: none
}

li {
  background: #000;
  display: inline-block;
  padding: 4px;
  color: #fff;
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}

ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

CSS margin-right: -4px;
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Omitting the &lt;/li&gt;
<ul>
  <li>one
    <li>two
      <li>three
</ul>

fixed with font-size: 0
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<br> flexbox
<br>
<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
0
Rahul Kapuriya

Chaque question qui tente de supprimer l’espace entre inline-blocks me semble être un <table> ...

Essayez quelque chose comme ça:

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>
0
Usagi Miyamoto

Juste pour le plaisir: une solution JavaScript facile.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

0
Sam

Il existe de nombreuses solutions telles que font-size:0, Word-spacing, margin-left, letter-spacing et ainsi de suite.

Normalement, je préfère utiliser letter-spacing car

  1. il semble bien que nous assignions une valeur plus grande que la largeur d’espace supplémentaire (par exemple -1em).
  2. Cependant, Word-spacing et margin-left ne seront pas acceptables si nous définissons une valeur plus grande comme -1em.
  3. Utiliser font-size n’est pas pratique lorsque nous essayons d’utiliser em comme unité font-size.

Donc, letter-spacing semble être le meilleur choix.

Cependant, je dois vous avertir 

lorsque vous utilisez letter-spacing, vous feriez mieux d'utiliser -0.3em ou -0.31em pas 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), voici ce que vous voyez:

 enter image description here

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

 enter image description here

C'est intéressant. Donc, j'ai vérifié le mdn-letter-spacing et trouvé ceci:

longueur

Spécifie un espace supplémentaire entre les caractères 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 à la mise en œuvre. Les agents d'utilisateur ne peuvent pas augmenter ou diminuer davantage l'espace entre les caractères afin de justifier le texte.

Il semble que ce soit la raison.

0
xianshenglu

Ajoutez letter-spacing:-4px; sur le parent p css et ajoutez letter-spacing:0px; à votre span css. 

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>

0
Mark Salvania

J'ai essayé la solution font-size: 0 à un problème similaire dans React et Sass pour un projet Free Code Camp sur lequel je travaille actuellement.

Et il fonctionne!

Tout d'abord, le script:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.Push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Ensuite, le Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px
0
John Gillespie
span { 
    display:inline-block;
    width:50px;
    background:blue;
    font-size:30px;
    color:white; 
    text-align:center;
} </ code>
<p><span>Foo</span><span>Bar</span></p>
0
Tarun..

Une autre façon que j'ai trouvée consiste à appliquer une marge négative comme valeur négative, à l'exception du 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
Sukhminder Parmar