Jak přidat vodorovný a svislý prostor mezi prvky ve službě Tailwind?

Jak Pridat Vodorovny A Svisly Prostor Mezi Prvky Ve Sluzbe Tailwind



Tailwind CSS poskytuje „ prostor mezi ” nástroje pro ovládání prostoru mezi prvky flex nebo mřížkového kontejneru. Má různé třídy, jako je „mezera-x-“, „mezera-y-“, „mezera-x-reverze“, „mezera-y-reverse“ atd. Tyto nástroje přidávají horizontální a vertikální prostor mezi prvky flex nebo mřížky v kontejneru.

Horizontální prostor je prostor podél osy x mezi podřízenými prvky ohebného nebo mřížkového kontejneru, když jsou uspořádány v řadě. Vertikální prostor je prostor podél osy y mezi podřízenými prvky ohebného nebo mřížkového kontejneru, když jsou uspořádány ve sloupci.

Tento článek ukáže:





Jak přidat vodorovnou mezeru mezi prvky ve službě Tailwind?

Chcete-li přidat vodorovnou mezeru mezi prvky v Tailwind, „ mezera-x- ” třída se používá s požadovaným prvkem v programu HTML. Tato třída přidává mezeru mezi prvky podél osy x.



Syntax



třída = 'mezera-x- ...'>... < / prvek>

Zde „x“ představuje „osu x“ nebo „horizontální prostor“. Nezapomeňte nahradit „“ jakoukoli platnou hodnotou, například „4“, „10“ atd.



Příklad: Použití vodorovné mezery mezi prvky v Tailwind

V tomto příkladu máme flex kontejner s některými podřízenými prvky. Budeme používat „ mezera-x-8 'užitná třída s '

” pro přidání vodorovné mezery mezi jeho podřízené prvky:



< tělo >

< div třída = 'flex space-x-8 m-10 h-20 w-max' >

< div třída = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div třída = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div třída = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div třída = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div třída = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div třída = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / tělo >

Zde v nadřazeném prvku

:

  • “ flex ” vytváří flexibilní rozvržení.
  • “ mezera-x-8 ” třída přidává 8 jednotek vodorovné vzdálenosti mezi ohebnými prvky v kontejneru.
  • “ m-10 “ třída přidává na všechny strany kontejneru okraj 10 jednotek.
  • “ h-20 ” class nastaví výšku kontejneru na 20 jednotek.
  • “ w-max ” nastaví šířku kontejneru na maximální šířku obsahu.

V podřízených prvcích

:

  • “ bg-teal-500 ” nastaví pozadí prvků flex na modrozelené.
  • “ w-20 ” class nastaví šířku každé položky flex na 20 jednotek.
  • “ p-5 “ třída přidává 5 jednotek vycpávky na všechny strany každé ohebné položky.

Výstup

Výše uvedený výstup indikuje, že horizontální prostor mezi ohebným prvkem byl úspěšně aplikován.

Jak přidat vertikální mezeru mezi prvky v Tailwind?

Chcete-li přidat svislý prostor mezi prvky v Tailwind, „ mezera-y- ” se používá se specifickým prvkem v programu HTML. Tato třída přidává mezeru mezi prvky podél osy y.

Syntax

třída = 'mezera-y- ...' >...< / prvek>

Zde „y“ představuje „osu y“ nebo „vertikální prostor“. Nezapomeňte nahradit „“ jakoukoli skutečnou hodnotou, například „5“, „12“ atd.

Příklad: Použití vertikální mezery mezi prvky v Tailwind

V tomto příkladu máme flex kontejner s některými podřízenými prvky ve sloupci. Budeme používat „ mezera-y-5 'užitná třída s '

” pro přidání vertikální mezery mezi jeho podřízené prvky:

< tělo >

< div třída = 'flex flex-col space-y-5 m-10 text-center' >
< div třída = 'bg-teal-500 p-5' > 1 < / div >
< div třída = 'bg-teal-500 p-5' > 2 < / div >
< div třída = 'bg-teal-500 p-5' > 3 < / div >
< div třída = 'bg-teal-500 p-5' > 4 < / div >
< / div >

< / tělo >

Tady:

  • “ flex ” vytváří flexibilní rozvržení.
  • “ flex-col ” třída zarovná flexibilní položky ve svislém směru (ve sloupci).
  • “ mezera-y-5 ” třída přidává 5 jednotek vertikální vzdálenosti mezi ohebnými prvky v kontejneru.
  • “ m-10 “ třída přidává na všechny strany kontejneru okraj 10 jednotek.
  • “ textové centrum ” třída zarovná text kontejneru na střed.

Výstup

Vertikální prostor mezi pružnými prvky byl použit efektivně.

Závěr

Chcete-li přidat horizontální a vertikální mezeru mezi prvky v Tailwind, „ mezera-x- ' a ' mezera-y- ” třídy obslužných programů se používají s požadovanými prvky v programu HTML. Tyto třídy se obvykle používají s kontejnery flex a grid k ovládání prostoru mezi jejich podřízenými prvky. Tento článek je příkladem metody použití vodorovného a svislého prostoru mezi prvky ve službě Tailwind.

jiný

Kategorie

Populární Příspěvky

Příručka pro začátečníky k vícefázovému sestavení dockeru

Zkopírujte obsah textového souboru do schránky pomocí kontextové nabídky - Winhelponline

Jak přidat/odebrat Windows Media Player ve Windows 10?

Jak přidat značky sestavení Golang

Co je HTML p Tag?

Sdílejte svůj terminál Raspberry Pi v prohlížeči pomocí ttyd

Vytvořte složky dlaždic a uspořádejte dlaždice nabídky Start ve Windows 10 - Winhelponline

Jak najít a používat koš ve Windows 10/11

Jak přidat jeden den k datu v Javě

Jak se připojit k instanci AWS EC2 z Windows

ESP32 DHT11 Odečet teploty a vlhkosti na OLED displeji pomocí Arduino IDE

Seznam Tkinter

Jak získat a používat Frost Walker Enchantment v Minecraftu

Převeďte Array of Starings na Array of Numbers v JavaScriptu

Jak randomizovat hodnotu v MATLABu?

Jak používat operátory Nullish Coalescing (??) a Nullish Coalescing Assignment (??=) v C#

Co stojí papoušek ve hře Adopt Me Roblox?

Rust Std::OS v Linuxu

Pojmenování souborů a složek – Raspberry Pi

Hash klíč Redis EXPIRE