Horizontálny priestor je priestor pozdĺž osi x medzi podradenými prvkami ohybného alebo mriežkového kontajnera, keď sú usporiadané v rade. Vertikálny priestor je priestor pozdĺž osi y medzi podradenými prvkami ohybného alebo mriežkového kontajnera, keď sú usporiadané v stĺpci.
Tento článok ukáže:
- Ako pridať horizontálny priestor medzi prvky v Tailwind?
- Ako pridať vertikálny priestor medzi prvky v Tailwind?
Ako pridať horizontálny priestor medzi prvky v Tailwind?
Ak chcete pridať vodorovnú medzeru medzi prvky v Tailwinde, „ medzera-x-
Syntax
Tu „x“ predstavuje „os x“ alebo „horizontálny priestor“. Nezabudnite nahradiť „
Príklad: Použitie vodorovného priestoru medzi prvkami v službe Tailwind
V tomto príklade máme flexibilný kontajner s niektorými podriadenými prvkami. Použijeme „ medzera-x-8 'úžitková trieda s ' Tu v nadradenom prvku V podriadených prvkoch Výkon Vyššie uvedený výstup naznačuje, že horizontálny priestor medzi ohybným prvkom bol úspešne použitý. Ak chcete pridať vertikálny priestor medzi prvky v Tailwinde, „ medzera-y- Syntax Tu „y“ predstavuje „os y“ alebo „vertikálny priestor“. Nezabudnite nahradiť „ Príklad: Použitie vertikálnej medzery medzi prvkami v Tailwind V tomto príklade máme flexibilný kontajner s niektorými podriadenými prvkami v stĺpci. Použijeme „ medzera-y-5 'úžitková trieda s ' Tu: Výkon Vertikálny priestor medzi ohybnými prvkami bol aplikovaný efektívne. Ak chcete pridať horizontálny a vertikálny priestor medzi prvky v Tailwinde, „ medzera-x-
< telo >
< div trieda = 'flex space-x-8 m-10 h-20 w-max' >
< div trieda = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div trieda = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div trieda = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div trieda = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div trieda = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div trieda = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / telo >
Ako pridať vertikálny priestor medzi prvky v Tailwind?
< div trieda = 'flex flex-col space-y-5 m-10 text-center' >
< div trieda = 'bg-teal-500 p-5' > 1 < / div >
< div trieda = 'bg-teal-500 p-5' > 2 < / div >
< div trieda = 'bg-teal-500 p-5' > 3 < / div >
< div trieda = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / telo >
Záver