Hur lägger man till horisontell och vertikal stoppning i medvind?

Hur Lagger Man Till Horisontell Och Vertikal Stoppning I Medvind



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-' med det önskade elementet i HTML-programmet. Användare kan ange olika värden för stoppningens storlek. Denna klass lägger till utfyllnad längs x-axeln, dvs på både vänster och höger sida av elementet.



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 '

'-element för att lägga till horisontell utfyllnad till det:



< 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?

För att lägga till vertikal utfyllnad till ett element i Tailwind, använd ' py- ” verktygsklass med det specifika elementet i HTML-programmet. Den här klassen lägger till utfyllnad längs y-axeln, dvs på både över- och undersidan av elementet.

Syntax

< element klass = 'py-0...' > ... element >


Här representerar 'py' 'y-axeln' eller 'vertikal utfyllnad'.

Exempel: Tillämpa vertikal utfyllnad på ett HTML-element

I det här exemplet kommer vi att använda ' py-20 ' nyttoklass med '

'-element för att lägga till vertikal utfyllnad till det:

< kropp >

< 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

För att lägga till den horisontella och vertikala stoppningen i Tailwind, ' px- ' och ' py- ” verktygsklasser används med önskade element i respektive HTML-program. Användare kan ange olika värden för att tillämpa utfyllnad till vänster och höger eller över- och undersidan av ett element. Den här artikeln har illustrerat den kompletta metoden för att applicera horisontell och vertikal stoppning i Tailwind.