Dodaj odstępy między elementami HTML tylko za pomocą CSS

Mam kilka takich samych elementów HTML idących jeden po drugim:

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

Szukam najlepszego sposobu na dodanie przestrzeni MIĘDZY elementami używając tylko CSS

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

Do tego:

• Prosimy o zapisanie zgodności rachunków z przeglądarkami

AKTUALIZACJA

Wygląda na to, że nie było jasne. Nie chcę używać ŻADNEGO DODATKOWEGO ZNACZNIKA HTML, takiego jak

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

Nie chcę używać tabel

Chcę, aby pierwszy i ostatni zakres był automatycznie kierowany przez CSS

Nie chcę używać javascript

Wymaganie opcjonalne: ostatni zakres NIE może być OSTATNIM DZIECKIEM tagu nadrzędnego, ale będzie to OSTATNI PASIĘĆ tagu nadrzędnego. Przedziały nie mają między sobą żadnych innych tagów.

Oto dobry sposób:

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

Każdy spanpoprzedzony a span( a więc każdy spanoprócz pierwszego) będzie miał margin-left: 10px.

Oto bardziej szczegółowa odpowiedź na podobne pytanie: Separatory między elementami bez hacków

Po prostu użyj marginesu lub dopełnienia.

W twoim konkretnym przypadku możesz użyć margin:0 10pxtylko 2<span> .

AKTUALIZACJA

Oto fajne rozwiązanie CSS3 ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Zaawansowany wybór elementu z użyciem selektorów podoba :nth-child(), :last-child, :first-of-typeitd jest obsługiwany od Internet Explorer 9.

dodaj te reguły do ​​kontenera nadrzędnego:

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

Dobre odniesienie: https://cssreference.io/

Zgodność z przeglądarkami: https://gridbyexample.com/browsers/

To takie proste.

Możesz stylizować elementy z wykluczeniem pierwszego, tylko w jednej linii kodu:

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

i gotowe, bez manipulacji klasami.

Możesz wykorzystać fakt, że spanjest to element inline

span{
     word-spacing:10px;
}

Jednak to rozwiązanie nie zadziała, jeśli masz więcej niż jedno słowo tekstu w swoim zakresie

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

Możesz napisać tak:

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

<span>jest elementem liniowym, więc nie można robić na nich odstępów bez ustawiania poziomu blokowego. Spróbuj tego

Poziomy

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

Pionowy

span{
    margin-bottom: 10px;
}

Kompatybilny ze wszystkimi przeglądarkami.

Powinieneś zawinąć swoje elementy w kontener, a następnie użyć nowych funkcji CSS3, takich jak siatka css , darmowy kurs , a następnie użyj grid-gap:valuetego, który został stworzony dla twojego konkretnego problemu

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>

Lub zamiast ustawiać margines i zamiast go zastępować, możesz po prostu ustawić go poprawnie od razu za pomocą następującej kombinacji:

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>

Jeśli chcesz wyrównać różne elementy i chcesz mieć taki sam margines ze wszystkich stron, możesz użyć następującego. Każdy element container, niezależnie od typu, otrzyma taki sam margines otaczający.

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

Jeśli chcesz wyrównać elementy w rzędzie, ale pierwszy element dotyka skrajnej lewej krawędzi container, a wszystkie pozostałe elementy są równomiernie rozmieszczone, możesz użyć tego:

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