Fügen Sie Leerzeichen zwischen Schaltflächen in HTML hinzu

1. Fügen Sie ein leeres div-Element zwischen zwei Schaltflächen hinzu, um in HTML einen Abstand zwischen ihnen hinzuzufügen
2. Verwenden Sie die Eigenschaft margin-right, um in HTML Leerzeichen zwischen die Schaltflächen zu setzen
3. Verwenden Sie die Eigenschaft margin-right und den Selektor not(:last-child), um in HTML einen Abstand zwischen mehreren Schaltflächen bereitzustellen

Dieser Artikel stellt einige Methoden vor, um Leerzeichen zwischen zwei HTML-Schaltflächen hinzuzufügen.

Fügen Sie ein leeres div-Element zwischen zwei Schaltflächen hinzu, um in HTML einen Abstand zwischen ihnen hinzuzufügen

Zwischen den beiden Schaltflächen kann ein leeres div eingefügt werden, um ein Leerzeichen dazwischen einzufügen. Dann können wir das div mit etwas Breite versehen, was etwas Platz zwischen den Schaltflächen schafft.

Standardmäßig hat ein div die Eigenschaft display von block. Das bedeutet, dass das div eine ganze Reihe seiner Position einnimmt.

Wenn wir ein Element nach einem div hinzufügen, wird dieses Element im Browser unter dem div platziert.

Dazu müssen wir die Anzeigeeigenschaft des div auf inline-block ändern. Die inline-block-Elemente haben sowohl die Eigenschaft block als auch inline.

Die inline-block-Elemente können Breite, Rand, Polsterung usw. haben, aber sie nehmen nicht die gesamte Zeile ihrer Position ein, im Gegensatz zu den block-Elementen.

Erstellen Sie zum Beispiel ein div; Erstellen Sie innerhalb dieses div zwei Schaltflächen mit dem button-Tag. Benennen Sie diese Tasten Taste 1 und Taste 2.

Erstellen Sie ein div zwischen diesen Schaltflächen und geben Sie ihm eine Klasse von space. Dieses div darf keine Elemente enthalten.

Wählen Sie das innere div mit seiner Klasse space in CSS aus und setzen Sie die Eigenschaft display auf inner-block. Geben Sie dem div je nach Anforderung etwas Breite.

Beachten Sie, dass der Wert von width der Abstand zwischen den Schaltflächen ist. Stellen Sie außerdem die Eigenschaft height auf auto, damit das div nur die erforderliche Höhe annimmt.

Das folgende Beispiel zeigt, dass zwei Schaltflächen einen Abstand von 4px haben.

Beispielcode:

<div>
  <button>
    Button 1
  </button>
  <div class="space">
  </div>
  <button>
    Button 2
  </button>
</div>

.space {
  width: 4px;
  height: auto;
  display: inline-block;
}

Verwenden Sie die Eigenschaft margin-right, um in HTML Leerzeichen zwischen die Schaltflächen zu setzen

Die CSS-Eigenschaft margin schafft Raum um Elemente ausserhalb definierter Grenzen. Die Margin-Eigenschaft kombiniert vier Eigenschaften: margin-top, margin-bottom, margin-left und margin-right.

Die Eigenschaft margin-top schafft oben auf einem Element Platz. Ebenso schaffen die Eigenschaften margin-bottom, margin-right und margin-left unten, rechts und links Platz.

Wir können die Eigenschaft margin-right für das erste Schaltflächenelement verwenden, um einen Abstand zwischen den Schaltflächen zu erstellen.

Als Ergebnis wird rechts von der Schaltfläche ein Rand mit einer bestimmten Breite erstellt. Dann befindet sich die andere Schaltfläche neben dem Rand.

Erstellen Sie beispielsweise zwei Schaltflächen mit dem Tag button und den Namen Button 1 und Button 2. Stellen Sie die Klassen der Taste als B1 und B2 ein.

Wählen Sie in CSS die Klasse B1 und setzen Sie deren Eigenschaft margin-right auf 4px. Dadurch wird ein 4px-Abstand rechts von Button 1 erstellt, wodurch ein Abstand zwischen den beiden Buttons entsteht.

Beispielcode:

<button class="B1">
  Button1
</button>
<button class="B2">
  Button2
</button>

.B1 {
 margin-right: 4px;
}

Verwenden Sie die Eigenschaft margin-right und den Selektor not(:last-child), um in HTML einen Abstand zwischen mehreren Schaltflächen bereitzustellen

Wir können Leerzeichen zwischen den mehreren Schaltflächen hinzufügen, indem wir die Eigenschaft margin-right und den CSS-Selektor not() verwenden. Die Logik hinter diesem Ansatz ist, dass wir den Abstand zwischen den einzelnen Schaltflächen mithilfe der Eigenschaft margin-right wie in der zweiten Methode erstellen.

Wir werden jedoch kein Leerzeichen nach der letzten Schaltfläche erstellen.

Dazu verwenden wir den Selektor not(). Innerhalb des Not-Selektors können wir :last-child verwenden.

Der Selektor :last-child bezeichnet das letzte untergeordnete Element in einem Container. Insgesamt können wir die folgende Regel anwenden, um die Stile anzuwenden.

.container>.button:not(:last-child){

}

Das Symbol > wählt jedes Kind innerhalb des Containers aus. Als Ergebnis werden die Stile auf alle untergeordneten Elemente mit der Klasse button innerhalb des übergeordneten Containers angewendet, mit Ausnahme des letzten untergeordneten Elements.

Erstellen Sie beispielsweise ein div und geben Sie ihm die Klasse container.

Erstellen Sie innerhalb des div drei Buttons und nennen Sie sie Button 1, Button 2 und Button 3. Legen Sie außerdem die Button als Klasse für jede Schaltfläche fest.

Verwenden Sie nun die oben erwähnte Regel, um den Stil in CSS festzulegen. Verwenden Sie innerhalb der Regel die Eigenschaft margin-right und setzen Sie sie auf 10px, um den Abstand zu 10px zwischen den untergeordneten Elementen oder Schaltflächen hinzuzufügen.

Das folgende Beispiel zeigt, dass die drei Schaltflächen einen Abstand von 10px haben.

Beispielcode:

<div class='container'>
 <button class='button'>Button 1</button>
 <button class='button'>Button 2</button>
 <button class='button'>Button 3</button>
</div>

.container>.button:not(:last-child) {
 margin-right: 10px;
}