I Tailwind CSS, stoppning är utrymmet mellan det specifika elementets innehåll och dess gräns. Horisontell stoppning är utrymmet på vänster och höger sida av elementet, medan vertikal stoppning är utrymmet på toppen och botten av ett element. Tailwind erbjuder olika verktygsklasser för att lägga till horisontell eller vertikal stoppning till de önskade elementen.
Denna artikel kommer att illustrera:
Hur lägger man till horisontell stoppning i medvind?
För att lägga till horisontell utfyllnad till ett element i Tailwind, används klassen 'px-
Syntax
< element klass = 'px-0...' > ... element >
Här representerar 'px' 'x-axeln' eller 'horisontell utfyllnad'.
Exempel: Tillämpa horisontell utfyllnad på ett HTML-element
I det här exemplet kommer vi att använda ' px-20 ' nyttoklass med ' För att lägga till vertikal utfyllnad till ett element i Tailwind, använd ' py- Syntax Exempel: Tillämpa vertikal utfyllnad på ett HTML-element I det här exemplet kommer vi att använda ' py-20 ' nyttoklass med ' För att lägga till den horisontella och vertikala stoppningen i Tailwind, ' px-
< kropp >
< div klass = 'bg-pink-600 px-20 w-max' >
Stoppning i Medvind CSS
div >
kropp >
Produktion
Ovanstående utdata visar stoppningen till vänster och höger sida av behållaren. Detta indikerar att den horisontella stoppningen har applicerats på behållarelementet framgångsrikt. Hur lägger man till vertikal stoppning i medvind?
Här representerar 'py' 'y-axeln' eller 'vertikal utfyllnad'.
< div klass = 'bg-pink-600 py-20 w-max' >
Stoppning i Medvind CSS
div >
kropp >
Produktion
Ovanstående utdata visar stoppningen på behållarens övre och nedre sidor. Detta indikerar att den vertikala stoppningen effektivt har applicerats på behållarelementet. Slutsats