V Tailwind CSS, a marža sa používa na ovládanie rozstupu okolo konkrétneho prvku. Pridáva priestor medzi aplikovaným prvkom a jeho okolitými prvkami. Tailwind CSS poskytuje sadu nástrojov okrajov a hodnôt okrajov, ktoré používateľom umožňujú prispôsobiť rozstup okolo požadovaných prvkov. Okrem toho môžu používatelia pridať okraj na jednu stranu, napríklad na hornú, spodnú, ľavú alebo pravú stranu konkrétneho prvku.
Tento blog ukáže príklady pridania okraja na jednu stranu prvku v CSS Tailwind.
Ako pridať okraj na jednu stranu v Tailwinde?
Ak chcete pridať okraj na jednu stranu prvku v Tailwinde, môžete použiť nasledujúce triedy užitočnosti:
Aby ste tomu lepšie porozumeli, prejdite si nižšie uvedené príklady.
Príklad 1: Pridajte okraj na vrch prvku
V tomto príklade použijeme „ mt-14 ” úžitková trieda v “ Výkon Príklad 2: Pridajte okraj na spodok prvku V tomto príklade použijeme „ mb-14 “trieda v “ Príklad 3: Pridajte okraj naľavo od prvku V tomto príklade použijeme „ ml-14 “trieda v “ Príklad 4: Pridajte okraj napravo od prvku V tomto príklade použijeme „ pán-14 “trieda v “ Na pridanie okraja na jednu stranu prvku v Tailwinde je možné použiť rôzne pomocné triedy, ako napríklad „ ml-
< div trieda = 'h-96 mt-14 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Tu:
Vyššie uvedený výstup ukazuje, že okraj bol pridaný do hornej časti kontajnera.
< div trieda = 'h-96 mb-14 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Výkon 
Je vidieť, že okraj bol pridaný na dno nádoby.
< div trieda = 'h-96 ml-14 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Výkon 
Vyššie uvedený výstup ukazuje, že okraj bol pridaný naľavo od prvku kontajnera.
< div trieda = 'h-96 mr-14 bg-purple-500' >
< p trieda = 'text-5xl text-center' > Marža v Tailwind CSS p >
div >
telo >
Výkon 
Ako vidíte, okraj bol efektívne pridaný napravo od kontajnera. Záver