Fügen Sie Platz zwischen HTML-Elementen nur mit CSS hinzu

Ich habe mehrere gleiche HTML-Elemente nacheinander:

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

Ich suche nach der besten Möglichkeit, Platz zwischen den Elementen nur mit CSS hinzuzufügen

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

Zusätzlich:

• Bitte notieren Sie sich die Browserkompatibilität Ihrer Belege

AKTUALISIEREN

Es sieht so aus, als wäre ich unklar. Ich möchte KEIN ZUSÄTZLICHES HTML-MARKUP wie verwenden

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

Ich möchte keine Tabellen verwenden

Ich möchte, dass die erste und letzte Spanne automatisch von CSS erfasst werden

Ich möchte kein Javascript verwenden

Optionale Anforderung: Die letzte Spanne kann NICHT LETZTES KIND des übergeordneten Tags sein, aber es ist die LETZTE SPAN des übergeordneten Tags. Zwischen Spans befinden sich keine weiteren Tags.

Ein guter Weg, dies zu tun, ist folgender:

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

Jeder, spandem ein vorangestellt ist span(also jeder spanaußer dem ersten), wird haben margin-left: 10px.

Hier ist eine detailliertere Antwort auf eine ähnliche Frage: Trennzeichen zwischen Elementen ohne Hacks

Verwenden Sie einfach Rand oder Polsterung.

In Ihrem speziellen Fall könnten Sie margin:0 10pxnur am 2. verwenden <span>.

AKTUALISIEREN

Hier ist eine schöne CSS3-Lösung ( jsFiddle ):

span {
    margin: 0 10px;
}

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

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

Erweiterte Elementauswahl unter Verwendung von Selektoren wie :nth-child(), :last-child, :first-of-typeusw. unterstützt , da Internet Explorer 9.

Fügen Sie diese Regeln zum übergeordneten Container hinzu:

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

Gute Referenz: https://cssreference.io/

Browserkompatibilität: https://gridbyexample.com/browsers/

Das ist so einfach.

Sie können Elemente so gestalten, dass Sie das erste ausschließen, nur in einer Codezeile:

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

und fertig, ohne dass die Klasse manipuliert.

Sie können die Tatsache nutzen, dass spanes sich um ein Inline-Element handelt

span{
     word-spacing:10px;
}

Diese Lösung wird jedoch unterbrochen, wenn Sie mehr als ein Textwort in Ihrer Spanne haben

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

Sie können so schreiben:

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

<span>ist ein Inline-Element, sodass Sie keinen Abstand festlegen können, ohne die Blockebene festzulegen. Versuche dies

Horizontal

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

Vertikale

span{
    margin-bottom: 10px;
}

Kompatibel mit allen Browsern.

Sie sollten Ihre Elemente in einen Container einschließen , dann neue CSS3-Funktionen wie CSS- Raster und kostenlosen Kurs verwenden und dann grid-gap:valuedie für Ihr spezifisches Problem erstellten verwenden

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>

Anstatt den Rand festzulegen und ihn nicht zu überschreiben, können Sie ihn auch sofort mit der folgenden Kombination richtig einstellen:

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>

Wenn Sie verschiedene Elemente ausrichten möchten und an allen Seiten den gleichen Rand haben möchten, können Sie Folgendes verwenden. Jedes Element container, unabhängig vom Typ, erhält den gleichen umgebenden Rand.

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

Wenn Sie Elemente in einer Reihe ausrichten möchten, das erste Element jedoch den äußersten linken Rand berührt containerund alle anderen Elemente gleich weit voneinander entfernt sind, können Sie Folgendes verwenden:

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