Voeg alleen ruimte toe tussen HTML-elementen met CSS

Ik heb verschillende dezelfde HTML-elementen achter elkaar:

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

Ik ben op zoek naar de beste manier om ruimte TUSSEN de elementen toe te voegen met behulp van alleen CSS

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

Aanvullend:

• Schrijf de browsercompatibiliteit van uw bonnen op

UPDATE

Het lijkt erop dat ik onduidelijk was. Ik wil GEEN EXTRA HTML-MARKUP gebruiken zoals

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

Ik wil geen tabellen gebruiken

Ik wil dat de eerste en de laatste reeks automatisch worden getarget door CSS

Ik wil geen javascript gebruiken

Optionele vereiste: laatste span kan NIET LAATSTE KIND van de bovenliggende tag zijn, maar het zal de LAATSTE OVEREENKOMST van de bovenliggende tag zijn. Spans hebben geen andere tags ertussen.

Antwoord 1, autoriteit 100%

Een goede manier om dit te doen is als volgt:

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

Elke spanvoorafgegaan door een span(dus elke spanbehalve de eerste) heeft margin-left: 10px.

Hier is een meer gedetailleerd antwoord op een vergelijkbare vraag: Scheidingstekens tussen elementen zonder hacks

Antwoord 2, autoriteit 12%

Gebruik gewoon marge of opvulling.

In jouw specifieke geval zou je margin:0 10pxalleen op de 2e <span>kunnen gebruiken.

UPDATE

Hier is een mooie CSS3-oplossing (jsFiddle):

span {
    margin: 0 10px;
}
span:first-of-type {
    margin-left: 0;
}
span:last-of-type {
    margin-right: 0;
}

Geavanceerde elementselectie met behulp van selectors zoals :nth-child(), :last-child, :first-of-type, enz. . wordt ondersteund sinds Internet Explorer 9.

Antwoord 3, autoriteit 9%

voeg deze regels toe aan de bovenliggende container:

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

Goede referentie: https://cssreference.io/

Browsercompatibiliteit: https://gridbyexample.com/browsers/

Antwoord 4, autoriteit 5%

Je kunt elementen stylen door de eerste uit te sluiten, slechts in één regel code:

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

Je hoeft geen lessen te wijzigen.

Antwoord 5, autoriteit 4%

U kunt profiteren van het feit dat spaneen inline element is

span{
     word-spacing:10px;
}

Deze oplossing werkt echter niet als u meer dan één woord tekst in uw spanwijdte heeft

Antwoord 6, autoriteit 2%

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

Antwoord 7

Je kunt zo schrijven:

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

Antwoord 8

<span>is een inline element, dus je kunt er geen spaties op maken zonder het blokniveau te maken.
Probeer dit

Horizontaal

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

Verticaal

span{
    margin-bottom: 10px;
}

Compatibel met alle browsers.

Antwoord 9

U moet uw elementen in een container stoppen en vervolgens nieuwe CSS3-functies gebruiken, zoals css grid, gratis cursusen gebruik vervolgens grid-gap:valuedie is gemaakt voor uw specifieke probleem

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>

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

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

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

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}
<span>text</span> <span class="middle">text</span> <span>text</span>