Dieser Blog bietet eine Idee, wie man in Tailwind den gleichen Abstand zwischen mehreren Elementen zuweisen kann.
Wie weist man in Tailwind den gleichen Abstand zwischen mehreren Elementen zu?
Benutzer können gleiche Abstände zwischen Elementen zuweisen, indem sie das „“ verwenden. space-{x/y}-{size} ” Utility-Klasse. Benutzer können Platz auf der x- oder y-Achse hinzufügen, indem sie einen ganzzahligen Wert angeben. Das Abstandsdienstprogramm ist notwendig, da es die Webseite attraktiv macht. Wenn eine Webseite nicht den richtigen Abstand zwischen den Elementen hat, wird sie keine Benutzer anziehen.
Nehmen wir ein Codebeispiel, um den gleichen Abstand zwischen Rasterelementen zuzuweisen.
Methode 1: Platz auf der X-Achse zuweisen.
Wenn auf der x-Achse der gleiche Platz zugewiesen wird, sind die Abstände rechts und links vom Element gleich. Um den Platz auf der x-Achse zuzuweisen, verwenden Sie die folgende Syntax:
Raum - X - { Größe }
Die Größe kann ein beliebiger ganzzahliger Wert sein.
Betrachten Sie den folgenden Code, um der x-Achse gleichen Platz zuzuweisen:
< Körper >< div Klasse = „mx-4 Raster Raster-Spalten-4 Leerzeichen-x-4“ >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 1 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 2 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 3 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 4 div >
div >
Körper >
In diesem Code:
- „ mx-4 ” fügt einen Rand von 4 px auf der x-Achse hinzu (rechts und links).
- Der ' Netz Die Klasse erstellt ein Raster.
- Der ' Rasterspalten-4 ” Machen Sie 4 Spalten im Raster.
- Der ' Leerzeichen-x-4 Fügt einen Abstand von 4 Pixeln zwischen den Elementen des Rasters hinzu.
- „ bg-grün-400 ” setzt die Hintergrundfarbe auf Grün.
- „ h-16 „Setzt die Höhe auf 16 Pixel.
- Der ' abgerundet-lg „macht die Ecke rund und der Randradius ist groß.
- Der ' Grenze-2 „erstellt einen 2px-Rahmen um das Element.
- „ Rand-Grün-800 „macht den Rand dunkelgrün.
Ausgabe
Sehen Sie sich die mit dem obigen Code erstellte Ausgabe in der Vorschau an:
Es ist ersichtlich, dass zwischen den Elementen ein Abstand von 4 Pixeln zugewiesen ist.
Methode 2: Platz auf der Y-Achse zuweisen.
Der Abstand kann auf der Y-Achse ähnlich wie bei der obigen Methode durch kleine Änderungen im obigen Code zugewiesen werden. Es weist Leerzeichen entlang der y-Achse (oben und unten) zu. Die Syntax dafür lautet:
Der folgende Code kann implementiert werden, um Leerzeichen entlang der y-Achse hinzuzufügen:
< Körper >< div Klasse = „mx-4 my-4 space-y-4“ >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 1 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 2 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 3 div >
< div Klasse = „bg-green-400 h-16 abgerundet-lg border-2 border-green-800“ > 4 div >
div >
Körper >
In diesem Code:
- „ mx-4 Fügt links und rechts von Elementen einen 4-Pixel-Rand hinzu, um die Ausgabe optimierter zu gestalten.
- „ mein-4 Fügt einen 4-Pixel-Rand auf der Y-Achse hinzu (oben und unten).
- „ Leerzeichen-y-4 Fügt Platz von 4 Pixeln auf der Y-Achse hinzu (oben und unten).
Ausgabe
Speichern Sie den obigen Code und zeigen Sie eine Vorschau der damit erstellten Webseite an, um den Abstand wie folgt anzuzeigen:
Dabei geht es darum, den Elementen den gleichen Abstand zuzuweisen.
Abschluss
Um in Tailwind den gleichen Abstand zwischen mehreren Elementen zuzuweisen, können Benutzer die Funktion „ space-{x/y}-{size} ” Dienstprogrammklasse und geben Sie je nach Anforderung einen ganzzahligen Wert als Größe an. Gleiche Abstände zwischen den Elementen machen die Ausgabe skalierbarer und die Betrachter bleiben mit der Webseite beschäftigt. In diesem Beitrag wurde die Methode bereitgestellt, um in Tailwind den gleichen Abstand zwischen mehreren Elementen zuzuweisen.