Tento blog vám poskytne představu o přiřazení stejného prostoru mezi více prvků ve službě Tailwind.
Jak přiřadit stejný prostor mezi více prvky ve službě Tailwind?
Uživatelé mohou mezi prvky přiřadit stejné mezery pomocí „ mezera-{x/y}-{velikost} “ užitná třída. Uživatelé mohou přidat místo na ose x nebo y zadáním celočíselné hodnoty. Nástroj pro mezery je nezbytný, protože činí webovou stránku atraktivní. Pokud webová stránka nemá správné mezery mezi prvky, nepřiláká uživatele.
Vezměme si příklad kódu pro přiřazení stejného prostoru mezi prvky mřížky.
Metoda 1: Přiřazení prostoru na ose X.
Stejný prostor přiřazený na ose x vytváří stejné rozestupy vpravo a vlevo od prvku. Chcete-li přiřadit prostor na ose x, použijte následující syntaxi:
prostor - X - { velikost }
Velikost může být libovolná celočíselná hodnota.
Zvažte níže uvedený kód pro přiřazení stejného prostoru na ose x:
< tělo >< div třída = 'mx-4 grid grid-cols-4 space-x-4' >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
tělo >
V tomto kódu:
- “ mx-4 “ přidá okraj 4 px na ose x (vpravo a vlevo).
- ' mřížka třída vytvoří mřížku.
- ' grid-cols-4 “ vytvořte 4 sloupce v mřížce.
- ' mezera-x-4 ” přidá mezeru 4px mezi prvky mřížky.
- “ bg-green-400 ” nastaví barvu pozadí na zelenou.
- “ h-16 ” nastaví výšku na 16px.
- ' zaoblené-lg ” zakulatí roh a poloměr ohraničení je velký.
- ' hranice-2 ” vytvoří kolem prvku 2px ohraničení.
- “ border-green-800 “ změní okraj tmavě zeleným.
Výstup
Náhled výstupu vytvořeného výše uvedeným kódem:
Je vidět, že mezi prvky je přiřazena mezera 4px.
Metoda 2: Přiřazení prostoru na ose y.
Mezery lze přiřadit na ose y podobně jako výše uvedená metoda, malými změnami ve výše uvedeném kódu. Přiděluje mezery podél osy y (nahoře a dole). Jeho syntaxe je:
Níže uvedený kód lze implementovat pro přidání mezer podél osy y:
< tělo >< div třída = 'mx-4 my-4 mezera-y-4' >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 1 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 2 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 3 div >
< div třída = 'bg-green-400 h-16 rounded-lg border-2 border-green-800' > 4 div >
div >
tělo >
V tomto kódu:
- “ mx-4 ” přidává okraj 4px vlevo a vpravo od prvků, aby byl výstup optimalizován.
- “ moje-4 ” přidá 4px okraj na ose y (nahoře a dole).
- “ mezera-y-4 ” přidá prostor 4px na ose y (nahoře a dole).
Výstup
Uložte výše uvedený kód a zobrazte náhled webové stránky, kterou vytvořil, abyste viděli mezery jako:
To je vše o přidělení stejného prostoru mezi prvky.
Závěr
Chcete-li přiřadit stejný prostor mezi více prvky v Tailwindu, mohou uživatelé použít „ mezera-{x/y}-{velikost} ” užitná třída a zadejte celočíselnou hodnotu jako velikost podle požadavku. Stejné rozestupy mezi prvky činí výstup škálovatelnějším a diváci zůstávají s webovou stránkou v kontaktu. Tento příspěvek poskytuje metodu, jak přiřadit stejný prostor mezi více prvků v Tailwindu.