In HTML sind Schaltflächen klickbare Elemente, die zur Ausführung einer bestimmten Aktion verwendet werden. Die meisten Tasten sind nahe beieinander platziert, aber Sie können Platz zwischen zwei Tasten mit der Margin -Eigenschaft von CSS geben. Zu diesem Zeitpunkt können Sie die Margen-Links-Eigenschaft oder die Rand-Rechts-Eigenschaft verwenden.

In diesem Artikel lernen Sie, wie Sie mit Hilfe von CSS Platz zwischen zwei Tasten geben können. Aber zuerst lernen. So lass uns anfangen!

Was ist CSS-Eigenschaft „Margin-Links“?

In CSS, “linksDie Eigenschaft wird verwendet, um Platz von der linken Seite der Elemente zu schaffen. Das Element wird weiter von seinen Nachbarn entfernt sein, wenn der Wert positiv ist, während es seinen Nachbarn näher kommt, wenn der angegebene Wert negativ ist.

Syntax

Die Syntax der Rand-Links-Eigenschaft lautet wie folgt:

Margin-Links: Wert

Anstelle von "Wert”, Stellen Sie den Rand ein, den Sie dem Element von der linken Seite geben möchten.

Was ist „Margin-Right“ -CSS-Eigenschaft?

Der "RandrechtDie Eigenschaft von CSS wird verwendet, um Platz von der rechten Seite des Elements zu schaffen. Es positioniert den Randbereich auf der rechten Seite des Elements. Der Standardwert der Marge-Right-Eigenschaft ist als Null festgelegt. Sie können jedoch sowohl positive als auch negative Werte dafür angeben.

Syntax

Die Syntax der Rand-Rechts-Eigenschaft ist unten angegeben:

Rand-Rechts: Wert

Setze das "WertSie möchten als Rand von der rechten Seite des Elements einstellen.

Wie man Platz zwischen zwei Tasten gibt?

Sie können Platz zwischen zwei Schaltflächen mit der “erstellenlinks" Und "Randrecht" Eigenschaften. Dazu werden wir im HTML -Abschnitt eine Überschrift verwenden

und erstellen Sie zwei Schaltflächen mit dem Klassennamen “btn1" Und "BTN2", bzw.

Html

Erstellen Sie Platz zwischen zwei Tasten

Klick mich
Klick mich

Das Standard -Ergebnis des angegebenen Code ist:

Gehen Sie nun zum CSS, um Platz zwischen diesen beiden Tasten zu schaffen.

Beispiel 1: Platz zwischen zwei Schaltflächen mit der Rand-Rechts-Eigenschaft geben

Hier, benutze “.btn1”Um auf die im HTML hinzugefügte erste Schaltfläche zuzugreifen und den Wert der Marge-Right-Eigenschaft als" festlegen "festlegen100px”.

CSS

.btn1
Rand-Rechts: 100px;

Wie Sie sehen können, wird Platz auf der rechten Seite der ersten Schaltfläche erstellt:

Im nächsten Beispiel werden wir die „verwenden“linksEigenschaft, um Platz zwischen zwei Tasten zu schaffen.

Beispiel 2: Platz zwischen zwei Tasten mit der Rand-Links-Eigenschaft geben

Wir werden verwenden ".BTN2”Um auf die in der HTML-Datei erstellte zweite Schaltfläche zuzugreifen und den Wert der Margen-Links-Eigenschaft als" zuweisen50px”:

.btn2
Rand-Links: 50px;

Auf diese Weise wird Platz für die linke Seite der zweiten Taste erstellt, die unten zu sehen ist:

Möchten beide Eigenschaften gleichzeitig verwenden? Schauen Sie sich das nächste Beispiel an!

Beispiel 3: Platz zwischen zwei Tasten mit Rand-Links- und Rand-Rechts-Eigenschaften geben

Sie können auch den Rand beider Tasten einstellen, um Platz zwischen ihnen zu geben. Dazu erstellen wir Platz von der rechten Seite der ersten Taste und von der linken Seite der zweiten Taste mit den Eigenschaften des Randrechts und der Marge-Links-Eigenschaften:

.btn1
Rand-Rechts: 70px;

.btn2
Rand-Links: 70px;

Ausgang

Wir haben die einfachste Methode zur Verfügung gestellt, um Platz zwischen zwei Schaltflächen in CSS zu geben.

Abschluss

“links" Und "RandrechtEigenschaften von CSS werden verwendet, um Platz zwischen zwei Tasten zu schaffen. Mit dieser Weise können Sie den Speicherplatz von der rechten und linken Seite der Tasten einstellen. In diesem Artikel haben wir erklärt.