Horizontaler Raum ist ein Abstand entlang der x-Achse zwischen den untergeordneten Elementen eines Flex- oder Grid-Containers, wenn diese in einer Reihe angeordnet sind. Vertikaler Raum ist ein Abstand entlang der y-Achse zwischen den untergeordneten Elementen eines Flex- oder Grid-Containers, wenn sie in einer Spalte angeordnet sind.
Dieser Artikel zeigt:
- Wie füge ich in Tailwind horizontalen Abstand zwischen Elementen hinzu?
- Wie füge ich in Tailwind vertikalen Abstand zwischen Elementen hinzu?
Wie füge ich in Tailwind horizontalen Abstand zwischen Elementen hinzu?
Um in Tailwind horizontalen Abstand zwischen Elementen hinzuzufügen, wird „ space-x-
Syntax
Dabei steht „x“ für die „x-Achse“ oder den „horizontalen Raum“. Stellen Sie sicher, dass Sie „
Beispiel: Anwenden eines horizontalen Abstands zwischen Elementen in Tailwind
In diesem Beispiel haben wir einen Flex-Container mit einigen untergeordneten Elementen. Wir verwenden das „ Leerzeichen-x-8 ” Utility-Klasse mit dem „ Hier im übergeordneten In den untergeordneten Ausgabe Die obige Ausgabe zeigt an, dass der horizontale Abstand zwischen den Flex-Elementen erfolgreich angewendet wurde. Um in Tailwind vertikalen Abstand zwischen Elementen hinzuzufügen, wird „ space-y- Syntax Hier steht „y“ für die „y-Achse“ oder den „vertikalen Raum“. Stellen Sie sicher, dass Sie „ Beispiel: Anwenden des vertikalen Abstands zwischen Elementen in Tailwind In diesem Beispiel haben wir einen Flex-Container mit einigen untergeordneten Elementen in einer Spalte. Wir verwenden das „ Leerzeichen-y-5 ” Utility-Klasse mit dem „ Hier: Ausgabe Der vertikale Raum zwischen den Flexelementen wurde effizient genutzt. Um den horizontalen und vertikalen Abstand zwischen Elementen in Tailwind hinzuzufügen, muss „ space-x-
< Körper >
< div Klasse = „flex space-x-8 m-10 h-20 w-max“ >
< div Klasse = „bg-teal-500 w-20 p-5“ > 1 < / div >
< div Klasse = „bg-teal-500 w-20 p-5“ > 2 < / div >
< div Klasse = „bg-teal-500 w-20 p-5“ > 3 < / div >
< div Klasse = „bg-teal-500 w-20 p-5“ > 4 < / div >
< div Klasse = „bg-teal-500 w-20 p-5“ > 5 < / div >
< div Klasse = „bg-teal-500 w-20 p-5“ > 6 < / div >
< / div >
< / Körper >
Wie füge ich in Tailwind vertikalen Abstand zwischen Elementen hinzu?
< div Klasse = „flex flex-col space-y-5 m-10 text-center“ >
< div Klasse = „bg-teal-500 p-5“ > 1 < / div >
< div Klasse = „bg-teal-500 p-5“ > 2 < / div >
< div Klasse = „bg-teal-500 p-5“ > 3 < / div >
< div Klasse = „bg-teal-500 p-5“ > 4 < / div >
< / div >
< / Körper >
Abschluss