Come rimuovo lo spazio tra gli elementi inline / inline-block?

Dato questo HTML e CSS:

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

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

Di conseguenza, ci sarà uno spazio di 4 pixel tra gli elementi SPAN.

demo: http://jsfiddle.net/dGHFV/

Capisco perché ciò accada e so anche che potrei liberarmi di quello spazio rimuovendo lo spazio bianco tra gli elementi SPAN nel codice sorgente HTML, in questo modo:

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

Tuttavia, speravo in una soluzione CSS che non richiedesse la manomissione del codice sorgente HTML.

So come risolverlo con JavaScript, rimuovendo i nodi di testo dall'elemento contenitore (il paragrafo), in questo modo:

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

Demo: http://jsfiddle.net/dGHFV/1/

Ma questo problema può essere risolto solo con CSS?

Poiché questa risposta è diventata piuttosto popolare, la sto riscrivendo in modo significativo.

Non dimentichiamo la vera domanda che è stata posta:

Come rimuovere lo spazio tra gli elementi del blocco inline ? Speravo in una soluzione CSS che non richiedesse la manomissione del codice sorgente HTML. Questo problema può essere risolto solo con CSS?

Si è possibile risolvere questo problema con il solo CSS, ma non ci sono del tutto robuste correzioni CSS.

La soluzione che ho avuto nella mia risposta iniziale è stata quella di aggiungere font-size: 0l'elemento genitore e quindi dichiarare ragionevole font-sizesui figli.

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

Funziona con le versioni recenti di tutti i browser moderni. Funziona in IE8. Non funziona in Safari 5, ma non il lavoro in Safari 6. Safari 5 è quasi un browser morti ( 0,33%, agosto 2015 ).

La maggior parte dei possibili problemi con dimensioni dei caratteri relative non è complicata da risolvere.

Tuttavia, sebbene questa sia una soluzione ragionevole se in particolare hai bisogno solo di una correzione CSS, non è ciò che raccomando se sei libero di cambiare il tuo HTML (come la maggior parte di noi).

Questo è ciò che io, in qualità di sviluppatore web ragionevolmente esperto, faccio effettivamente per risolvere questo problema:

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

Sì, è giusto. Rimuovo lo spazio bianco nell'HTML tra gli elementi di blocco inline.

È facile. È semplice. Funziona ovunque. È la soluzione pragmatica.

A volte devi considerare attentamente da dove verrà lo spazio bianco. L'aggiunta di un altro elemento con JavaScript aggiungerà spazi bianchi?No, non se lo fai correttamente.

Facciamo un viaggio magico in diversi modi per rimuovere gli spazi bianchi, con alcuni nuovi HTML:

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

• Puoi farlo, come faccio di solito:

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

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

• O questo:

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

• Oppure usa i commenti:

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

• Oppure, se stai usando PHP o simili:

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

• Oppure, puoi anche saltare del tutto alcuni tag di chiusura (tutti i browser vanno bene con questo):

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

Ora che sono andato e ti ho annoiato a morte con "mille modi diversi di rimuovere gli spazi bianchi, a trenta punti", si spera che ti sei dimenticato di tutto font-size: 0.

In alternativa, ora puoi usare flexbox per ottenere molti dei layout che potresti aver precedentemente utilizzato inline-block per: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Esiste per i browser conformi a CSS3 white-space-collapsing:discard

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

MODIFICARE:

oggi dovremmo semplicemente usare Flexbox .

VECCHIA RISPOSTA:

OK, anche se ho upvoted entrambe le font-size: 0;e le not implemented CSS3 featurerisposte, dopo aver provato ho scoperto che nessuno di loro è una vera e propria soluzione di .

In realtà, non esiste nemmeno una soluzione senza forti effetti collaterali.

Quindi ho deciso di rimuovere gli spazi (questa risposta riguarda questo argomento) tra i inline-blockdiv dalla mia HTMLfonte ( JSP), trasformando questo:

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

a questo

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

è brutto, ma funziona.

Ma aspetta un minuto ... cosa succede se sto generando i miei div all'interno Taglibs loops( Struts2,JSTL , ecc ...)?

Per esempio:

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

Non è assolutamente pensabile incorporare tutta quella roba, vorrebbe 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>

che non è leggibile, difficile da mantenere e da capire, ecc ...

La soluzione che ho trovato:

usa i commenti HTML per collegare la fine di un div all'inizio del prossimo!

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

In questo modo avrai un codice leggibile e correttamente rientrato.

E, come effetto collaterale positivo, il HTML source , sebbene infestato da commenti vuoti, risulterà correttamente rientrato;

prendiamo il primo esempio. A mio modesto parere, questo:

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

è meglio di questo:

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

Aggiungi commenti tra gli elementi per NON avere uno spazio bianco. Per me è più semplice che reimpostare la dimensione del carattere su zero e quindi ripristinarlo.

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

Tutte le tecniche di eliminazione dello spazio per display:inline-blocksono brutti hack ...

Usa Flexbox

È fantastico, risolve tutto questo layout di blocchi inline bs e dal 2017 ha il supporto del browser al 98% (di più se non ti interessa i vecchi IE).

• Siamo pronti all'uso Flexbox?
• Utilizzo delle caselle flessibili CSS - Guida per gli sviluppatori Web | MDN
• Una guida completa a Flexbox | CSS-Tricks
• Flexy Boxes - Parco giochi CSS flessibile e strumento per la generazione di codice

Aggiungi display: flex;all'elemento genitore. Ecco la soluzione con un prefisso:

Versione semplificata 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

Correzione con prefisso 👇

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>

Questa è la stessa risposta che ho dato sul relativo: Display: blocco in linea - Cos'è quello spazio?

In realtà c'è un modo davvero semplice per rimuovere gli spazi bianchi dal blocco inline che è sia semplice che semantico. Si chiama carattere personalizzato con spazi di larghezza zero, che consente di comprimere lo spazio bianco (aggiunto dal browser per gli elementi incorporati quando si trovano su linee separate) a livello del carattere utilizzando un carattere molto piccolo. Una volta che dichiari il carattere, devi solo cambiare font-familyil contenuto nel contenitore, quindi di nuovo sui bambini e voilà. Come questo:

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

Adatto a piacere. Ecco un download del font che ho appena elaborato in font-forge e convertito con il generatore webfont FontSquirrel. Mi ci sono voluti tutti e 5 i minuti. La @font-facedichiarazione CSS è inclusa: carattere spaziale zippato a larghezza zero . È su Google Drive, quindi dovrai fare clic su File> Scarica per salvarlo sul tuo computer. Probabilmente dovrai cambiare anche i percorsi dei caratteri se copi la dichiarazione nel tuo file css principale.

Altre due opzioni basate su CSS Text Module Level 3 (invece di quelle white-space-collapsing:discardche erano state eliminate dalla bozza della specifica):

• word-spacing: -100%;

In teoria, dovrebbe fare esattamente ciò che è necessario: ridurre gli spazi bianchi tra le 'parole' del 100% della larghezza del carattere dello spazio, ovvero a zero. Ma sembra non funzionare da nessuna parte, sfortunatamente, e questa funzione è contrassegnata "a rischio" (può anche essere eliminata dalle specifiche).

• word-spacing: -1ch;

Riduce gli spazi tra le parole della larghezza della cifra '0'. In un carattere monospace dovrebbe essere esattamente uguale alla larghezza del carattere spazio (e anche a qualsiasi altro carattere). Funziona con Firefox 10+, Chrome 27+ e quasi funziona con Internet Explorer 9+.

Violino

Purtroppo è il 2019 e non white-space-collapseè ancora implementato.

Nel frattempo, dai l'elemento genitore font-size: 0;e imposta font-sizeil figlio. Questo dovrebbe fare il trucco

Usa flexbox ed esegui un fallback (dai suggerimenti sopra) per i browser più vecchi:

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

Semplice:

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

Non è necessario toccare l'elemento padre.

Solo condizione qui: la dimensione del carattere dell'articolo non deve essere definita (deve essere uguale alla dimensione del carattere del genitore).

0.25em è l'impostazione predefinita word-spacing

W3Schools - proprietà di spaziatura tra le parole

font-size: 0; può essere un po 'più complicato da gestire ...

Penso che le seguenti righe siano molto migliori, più riutilizzabili e che risparmino tempo rispetto a qualsiasi altro metodo. Lo uso personalmente:

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

Quindi puoi usarlo come segue ...

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

Per quanto ne so (potrei sbagliarmi) ma tutti i browser supportano questo metodo.

SPIEGAZIONE :

Funziona (forse -3px potrebbe essere migliore) esattamente come ci si aspetterebbe che funzioni.

• copi e incolli il codice (una volta)
• quindi sul tuo HTML basta usare class="items"il genitore di ogni blocco inline.

NON sarà necessario tornare al CSS e aggiungere un'altra regola CSS per i nuovi blocchi in linea.

Risolvere due problemi contemporaneamente.

Si noti inoltre >che il segno (maggiore del segno) significa che * / tutti i bambini devono essere inline-block.

http://jsfiddle.net/fD5u3/

NOTA: ho modificato per adattarmi all'ereditarietà della spaziatura tra lettere quando un wrapper ha un wrapper figlio.

Tuttavia, tecnicamente non è una risposta alla domanda: "Come rimuovo lo spazio tra gli elementi di blocco inline?"

Puoi provare la soluzione flexbox e applicare il codice qui sotto e lo spazio verrà rimosso.

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

Puoi saperne di più a riguardo su questo link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Non sono abbastanza sicuro se vuoi fare due span blu senza uno spazio o se vuoi gestire altri spazi bianchi, ma se vuoi rimuovere lo spazio:

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

    float: left;
}

E fatto.

Generalmente usiamo elementi come questo in righe diverse, ma in caso di display:inline-blockutilizzo di tag nella stessa riga rimuoverà lo spazio, ma in una riga diversa no.

Un esempio con tag in una riga diversa:

p span {
  display: inline-block;
  background: red;
}

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

Esempio con tag nella stessa riga

p span {
  display: inline-block;
  background: red;
}

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

Un altro metodo efficiente è un lavoro CSS che utilizza font-size:0l'elemento genitore e fornisce font-sizea un elemento figlio quanto vuoi.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

I metodi di cui sopra potrebbero non funzionare da qualche parte a seconda dell'intera applicazione, ma l'ultimo metodo è una soluzione infallibile per questa situazione e può essere utilizzato ovunque.

Ho avuto questo problema in questo momento e da font-size:0;quando ho scoperto che in Internet Explorer 7 il problema persiste perché Internet Explorer pensa "Dimensione carattere 0?!?! WTF sei pazzo?" - Quindi, nel mio caso ho ripristinato il CSS di Eric Meyer e con font-size:0.01em;ho una differenza di 1 pixel da Internet Explorer 7 a Firefox 9, quindi penso che questa possa essere una soluzione.

Ho affrontato questo problema di recente e invece di impostare il genitore e font-size:0poi riportare il figlio su un valore ragionevole, ho ottenuto risultati coerenti impostando il contenitore genitore letter-spacing:-.25emquindi il figlio suletter-spacing:normal .

In un thread alternativo ho visto una menzione del commentatore che font-size:0non è sempre l'ideale perché le persone possono controllare le dimensioni minime dei caratteri nei loro browser, annullando completamente la possibilità di impostare la dimensione del carattere su zero.

L'uso di ems sembra funzionare indipendentemente dal fatto che la dimensione del carattere specificata sia 100%, 15pt o 36px.

http://cdpn.io/dKIjo

Penso che ci sia un metodo molto semplice / vecchio per questo che è supportato da tutti i browser anche IE 6/7. Potremmo semplicemente impostare letter-spacingun valore negativo elevato in parent e quindi ripristinarlo su normalat child elements:

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 risposta più semplice a questa domanda è quella di aggiungere.

css

float: left;

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

Con parentesi PHP:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Espanderò un po 'la risposta dell'utente 5609829 poiché credo che le altre soluzioni qui siano troppo complicate / troppo impegnative. L'applicazione di margin-right: -4pxa agli elementi di blocco inline rimuoverà la spaziatura ed è supportata da tutti i browser. Vedi il violino aggiornato qui . Per gli interessati con l'utilizzo di margini negativi, provare a dare questa una lettura.

La specifica di livello 4 del modulo di testo CSS definisce atext-space-collapse proprietà, che consente di controllare il modo in cui viene elaborato lo spazio bianco all'interno e attorno a un elemento.

Quindi, per quanto riguarda il tuo esempio, dovresti solo scrivere questo:

p {
  text-space-collapse: discard;
}

Sfortunatamente, nessun browser sta ancora implementando questa proprietà (da settembre 2016) come menzionato nei commenti alla risposta di HBP .

Ho trovato una soluzione CSS pura che ha funzionato molto bene per me in tutti i browser:

span {
    display: table-cell;
}

Aggiungi white-space: nowrapall'elemento contenitore:

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>

Ecco il Plunker .

Ci sono un sacco di soluzioni come font-size:0, word-spacing, margin-left, letter-spacinge così via.

Normalmente preferisco usare letter-spacingbecause

1. sembra ok quando assegniamo un valore maggiore della larghezza dello spazio extra (ad es -1em.).
2. Tuttavia, non andrà bene con word-spacinge margin-leftquando impostiamo un valore maggiore come -1em.
3. L'uso font-sizenon è conveniente quando proviamo a utilizzare emcome font-sizeunità.

Quindi, letter-spacingsembra essere la scelta migliore.

Tuttavia, devo avvisarti

quando stai usando letter-spacingè meglio usare -0.3emo -0.31emno gli altri.

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

Se stai utilizzando Chrome (versione di prova 66.0.3359.139) o Opera (versione di prova 53.0.2907.99), quello che vedi potrebbe essere:

Se stai usando Firefox (60.0.2), IE10 o Edge, quello che vedi potrebbe essere:

Interessante. Quindi, ho controllato la spaziatura mdn-letter e ho trovato questo:

lunghezza

Specifica lo spazio extra tra i caratteri oltre allo spazio predefinito tra i caratteri. I valori possono essere negativi, ma potrebbero esserci limiti specifici per l'implementazione. Gli interpreti non possono aumentare o diminuire ulteriormente lo spazio tra i caratteri per giustificare il testo.

Sembra che questa sia la ragione.

Aggiungi letter-spacing:-4px;ai tuoi genitori pcss e aggiungi letter-spacing:0px;ai tuoi 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>

Ho pensato di aggiungere qualcosa di nuovo a questa domanda poiché, sebbene molte delle risposte attualmente fornite siano più che adeguate e pertinenti, ci sono alcune nuove proprietà CSS che possono ottenere un risultato molto pulito, con pieno supporto su tutti i browser e poco nessun "hack". Questo si allontana inline-blockma ti dà gli stessi risultati della domanda posta.

Queste proprietà CSS sono grid

CSS Grid è altamente supportato ( CanIUse ) oltre a IE che necessita solo di un -ms-prefisso per consentirne il funzionamento.

CSS Grid è anche estremamente flessibile, e prende tutte le parti buone da table, flexeinline-block gli elementi e li porta in un unico luogo.

Quando si crea un gridè possibile specificare gli spazi tra le righe e le colonne. Il divario predefinito è già impostato su 0pxma è possibile modificare questo valore in qualsiasi modo si desideri.

Per farla breve, ecco un esempio di lavoro pertinente:

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>

Un altro modo che ho scoperto è applicare il margine sinistro come valori negativi tranne il primo elemento della riga.

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

Ogni domanda, che tenta di rimuovere lo spazio tra inline-blocks, mi sembra una <table>...

Prova qualcosa del genere:

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>