Aggiungi spazio tra gli elementi HTML solo utilizzando CSS

Ho diversi stessi elementi HTML che vanno uno dopo l'altro:

<span>1</span>
<span>2</span>
<span>3</span>

Sto cercando il modo migliore per aggiungere spazio TRA gli elementi utilizzando solo CSS

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

Inoltre:

• Si prega di annotare la compatibilità del browser delle ricevute

AGGIORNARE

Sembra che non fossi chiaro. Non voglio usare ALCUN MARKUP HTML AGGIUNTIVO come

<span></span>  <span></span>  <span class="last_span"></span>

Non voglio usare le tabelle

Desidero che il primo e l'ultimo intervallo vengano scelti come target automaticamente dai CSS

Non voglio usare javascript

Requisito facoltativo: l'ultimo intervallo può essere NON LAST CHILD del tag genitore, ma sarà l'ULTIMO SPAN del tag genitore. Gli intervalli non hanno altri tag tra di loro.

Un buon modo per farlo è questo:

span + span {
    margin-left: 10px;
}

Ogni spanpreceduto da un span(quindi, tutti spantranne il primo) avrà margin-left: 10px.

Ecco una risposta più dettagliata a una domanda simile: separatori tra elementi senza hack

Usa solo margine o imbottitura.

Nel tuo caso specifico, potresti usare margin:0 10pxsolo il 2 ° <span>.

AGGIORNARE

Ecco una bella soluzione CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

Selezione Elemento avanzato utilizzando i selettori piace :nth-child(), :last-child, :first-of-type, ecc è supportato dal Internet Explorer 9.

aggiungi queste regole al contenitore principale:

display: grid
grid-auto-flow: column
grid-column-gap: 10px

Buon riferimento: https://cssreference.io/

Compatibilità del browser: https://gridbyexample.com/browsers/

È così facile.

Puoi applicare uno stile agli elementi escludendo il primo, solo in una riga di codice:

span ~ span {
padding-left: 10px;
}

e fatto, senza manipolare la classe.

Puoi trarre vantaggio dal fatto che spanè un elemento in linea

span{
     word-spacing:10px;
}

Tuttavia, questa soluzione non funzionerà se hai più di una parola di testo nel tuo intervallo

span:not(:last-child) {
    margin-right: 10px;
}

Puoi scrivere in questo modo:

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

<span>è un elemento in linea, quindi non puoi creare spaziatura su di essi senza renderlo a livello di blocco. Prova questo

Orizzontale

span{
    margin-right: 10px;
    float: left;
}

Verticale

span{
    margin-bottom: 10px;
}

Compatibile con tutti i browser.

Dovresti avvolgere i tuoi elementi all'interno di un contenitore, quindi utilizzare le nuove funzionalità CSS3 come la griglia CSS , il corso gratuito e quindi utilizzare grid-gap:valuequello creato per il tuo problema specifico

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

Oppure, invece di impostare il margine e di sovrascriverlo, puoi semplicemente impostarlo correttamente subito con la seguente combinazione:

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

Se desideri allineare vari elementi e desideri avere lo stesso margine su tutti i lati, puoi utilizzare quanto segue. Ogni elemento all'interno container, indipendentemente dal tipo, riceverà lo stesso margine circostante.

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

Se desideri allineare gli elementi in una riga, ma fai in modo che il primo elemento tocchi il bordo più a sinistra di container e tutti gli altri elementi siano equidistanti, puoi utilizzare questo:

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}