Hvordan tilføjer man vandret og lodret polstring i medvind?

Hvordan Tilfojer Man Vandret Og Lodret Polstring I Medvind



I Tailwind CSS, polstring er rummet mellem det specifikke elements indhold og dets grænse. Vandret polstring er mellemrummet på venstre og højre side af elementet, hvorimod lodret polstring er rummet på toppen og bunden af ​​et element. Tailwind tilbyder forskellige brugsklasser for at tilføje vandret eller lodret polstring til de ønskede elementer.

Denne artikel vil illustrere:







Hvordan tilføjer man vandret polstring i medvind?

For at tilføje vandret polstring til et element i Tailwind, bruges klassen 'px-' med det ønskede element i HTML-programmet. Brugere kan angive forskellige værdier for størrelsen af ​​polstringen. Denne klasse tilføjer polstring langs x-aksen, dvs. til både venstre og højre side af elementet.



Syntaks



< element klasse = 'px-0 ...' > ... element >


Her repræsenterer 'px' 'x-aksen' eller 'vandret polstring'.





Eksempel: Anvendelse af vandret polstring til et HTML-element

I dette eksempel vil vi bruge ' px-20 ' brugsklasse med '

' element for at tilføje vandret polstring til det:



< legeme >

< div klasse = 'bg-pink-600 px-20 w-max' >
Polstring i Medvind CSS
div >

legeme >


Produktion


Ovenstående output viser polstringen til venstre og højre side af beholderen. Dette indikerer, at den vandrette polstring er blevet påført beholderelementet med succes.

Hvordan tilføjes lodret polstring i medvind?

For at tilføje lodret polstring til et element i Tailwind, brug ' py- ” hjælpeklasse med det specifikke element i HTML-programmet. Denne klasse tilføjer polstring langs y-aksen, dvs. til både den øverste og nederste side af elementet.

Syntaks

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


Her repræsenterer 'py' 'y-aksen' eller 'lodret polstring'.

Eksempel: Anvendelse af lodret polstring på et HTML-element

I dette eksempel vil vi bruge ' py-20 ' brugsklasse med '

'-element for at tilføje lodret polstring til det:

< legeme >

< div klasse = 'bg-pink-600 py-20 w-max' >
Polstring i Medvind CSS
div >

legeme >


Produktion


Ovenstående output viser polstringen til toppen og bunden af ​​beholderen. Dette indikerer, at den lodrette polstring er blevet effektivt påført beholderelementet.

Konklusion

For at tilføje den vandrette og lodrette polstring i Tailwind, ' px- ' og ' py- ” utility classes bruges med de ønskede elementer i HTML-programmet hhv. Brugere kan angive forskellige værdier for at anvende polstring til venstre og højre eller toppen og bunden af ​​et element. Denne artikel har illustreret den komplette metode til at anvende vandret og lodret polstring i Tailwind.