In diesem Handbuch lernen Sie, wie Sie zwischen zwei Links Platz schaffen.
Lass uns anfangen!
Wie gibt man in HTML & CSS Platz zwischen zwei Links?
Um Platz zwischen zwei Links zu schaffen, fügen Sie zunächst die benötigten Links in die HTML-Datei ein.
Schritt 1: Fügen Sie Links in HTML hinzu
In HTML erstellen wir einen Container mit dem
HTML
< div >< a href = „https://linuxhint.com/create-html-file/“ > Wie erstelle ich eine HTML-Datei? < / a >
< a href = „https://linuxhint.com/edit-html-file/“ > Wie bearbeite ich eine HTML-Datei? < / a >
< / div >
Das folgende Bild zeigt, dass die Links erfolgreich hinzugefügt wurden:
Schritt 2: Gestalten Sie das Div & Link
Gestalten Sie in diesem Schritt das div und den Link mit „ div “ im CSS. Wir werden die Polsterung auf „ 40px “ und stellen Sie die Schriftgröße der Links auf „ größer “, wird die Höhe des div festgelegt als „ 150px “ und verwenden Sie die Hintergrundeigenschaft und legen Sie die Farbe des div als „ Schwarz “. Passen Sie danach die Rahmenbreite als „ 5px “, Stil als „ gestrichelt “ und Farbe als „ RGB(251, 255, 0) “.
CSS
div {Polsterung : 40px ;
Schriftgröße : größer ;
Höhe : 150px ;
Hintergrund : Schwarz ;
Grenze : 5px gestrichelt rgb ( 251 , 255 , 0 ) ;
}
Unter Verwendung des obigen Codes wird die folgende Ausgabe erhalten. Wie Sie sehen können, sind sowohl das div als auch die Links formatiert:
Schritt 3: Geben Sie horizontal Platz zwischen zwei Links
Wir können mit HTML und CSS einen horizontalen Abstand zwischen zwei Links schaffen. Hier erklären wir beide Methoden nacheinander.
Methode 1: Verwenden von HTML
Um Platz zwischen den Links zu schaffen, ohne externes CSS zu schreiben, können Sie „ “ im HTML-Code, wo Sie Platz schaffen möchten. „ “ steht für non-breaking space. In der HTML-Datei bedeutet das Hinzufügen von einem ein Leerzeichen. Wenn Sie mehr Platz einräumen möchten, ist es nicht vorzuziehen, entsprechend der erforderlichen Anzahl von Leerzeichen manuell hinzuzufügen.
Kommen wir zum Beispiel, um das genannte Konzept zu verstehen!
Beispiel
Hier schreiben wir viermal „ ” um Platz nach dem ersten Link zu schaffen, so dass der zweite Link nach den vier Leerzeichen erscheint.
HTML
< div >< a href = „https://linuxhint.com/create-html-file/“ > Wie erstelle ich eine HTML-Datei? < / a >
Wie bearbeite ich eine HTML-Datei?
Wie Sie sehen können, wird auf der rechten Seite des ersten Links Platz geschaffen:
Methode 2: Verwendung von CSS
In CSS verwenden wir das „ Rand rechts ”-Eigenschaft, um Platz zwischen zwei Links zu schaffen. Das ' Rand rechts ”-Eigenschaft wird verwendet, um Platz von der rechten Seite des Elements hinzuzufügen. Sie können auch die negativen Werte dafür festlegen.
Syntax
Die Syntax der Eigenschaft margin-right ist unten angegeben:
Rand rechts : WertAnstelle von ' Wert “, legen Sie den Rand von der rechten Seite des Elements fest. Fahren wir mit dem Beispiel fort.
Beispiel
Hier verwenden wir „ a “, um auf den Link zuzugreifen, den wir im HTML erstellt haben. Legen Sie als Nächstes den Wert der Eigenschaft margin-right als „ 50px “:
a {Rand rechts : 50px ;
}
Platz wird von der rechten Seite des ersten Links erstellt, der unten zu sehen ist:
Schritt 4: Geben Sie vertikal Platz zwischen zwei Links
Um zwischen zwei Links einen vertikalen Abstand zu schaffen, richten Sie zuerst die Links in vertikaler Form aus. Dies geschieht mit Hilfe des „ Block „Wert des“ Anzeige ” Eigenschaft und dann mit der “ Zeilenhöhe ”-Eigenschaft, um Platz zwischen zwei Verbindungslinien zu schaffen.
Beispiel:
Hier setzen wir den Wert der Anzeigeeigenschaft als „ Block “, um Links vertikal auszurichten. Geben Sie dann den Abstand zwischen zwei Links an, indem Sie den Wert der line-height-Eigenschaft auf „ 80px “:
a {Anzeige : Block ;
Zeilenhöhe : 80px ;
}
Wie Sie sehen können, wird der Abstand mithilfe der line-height-Eigenschaft erstellt:
Das ist es! Wir haben die Methode zum Platzieren zwischen zwei Links in HTML & CSS erklärt.
Fazit
Das ' “, „ Rand rechts ', und ' Zeilenhöhe ”-Eigenschaften von CSS werden verwendet, um horizontalen und vertikalen Abstand zwischen zwei Links zu geben. Auf diese Weise können Sie den Abstand von der rechten und linken Seite der Links anpassen. In diesem Artikel haben wir das Verfahren zum Platzieren zwischen zwei Links mit zwei verschiedenen Methoden erklärt und entsprechende Beispiele bereitgestellt.