Hvordan legge til horisontal og vertikal polstring i medvind?

Hvordan Legge Til Horisontal Og Vertikal Polstring I Medvind



I Tailwind CSS, polstring er rommet mellom det spesifikke elementets innhold og dets grense. Horisontal polstring er mellomrommet på venstre og høyre side av elementet, mens vertikal polstring er plassen på toppen og bunnen av et element. Tailwind tilbyr ulike bruksklasser for å legge til horisontal eller vertikal polstring til de ønskede elementene.

Denne artikkelen vil illustrere:







Hvordan legge til horisontal polstring i medvind?

For å legge til horisontal polstring til et element i Tailwind, brukes klassen 'px-' med ønsket element i HTML-programmet. Brukere kan angi forskjellige verdier for størrelsen på polstringen. Denne klassen legger til polstring langs x-aksen, dvs. til både venstre og høyre side av elementet.



Syntaks



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


Her representerer 'px' 'x-aksen' eller 'horisontal polstring'.





Eksempel: Bruk av horisontal utfylling på et HTML-element

I dette eksemplet vil vi bruke ' px-20 ' bruksklasse med '

'-element for å legge til horisontal polstring til det:



< kropp >

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

kropp >


Produksjon


Utgangen ovenfor viser polstringen til venstre og høyre side av beholderen. Dette indikerer at den horisontale polstringen er påført beholderelementet vellykket.

Hvordan legge til vertikal polstring i medvind?

For å legge til vertikal polstring til et element i Tailwind, bruk ' py- ” verktøyklasse med det spesifikke elementet i HTML-programmet. Denne klassen legger til polstring langs y-aksen, dvs. til både topp- og bunnsiden av elementet.

Syntaks

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


Her representerer 'py' 'y-aksen' eller 'vertikal polstring'.

Eksempel: Bruk av vertikal utfylling på et HTML-element

I dette eksemplet vil vi bruke ' py-20 ' bruksklasse med '

'-element for å legge til vertikal polstring til det:

< kropp >

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

kropp >


Produksjon


Utgangen ovenfor viser polstringen til toppen og bunnen av beholderen. Dette indikerer at den vertikale polstringen er effektivt påført beholderelementet.

Konklusjon

For å legge til horisontal og vertikal polstring i Tailwind, ' px- ' og ' py- ” nytteklasser brukes med de ønskede elementene i HTML-programmet henholdsvis. Brukere kan spesifisere forskjellige verdier for å bruke polstring til venstre og høyre eller toppen og bunnen av et element. Denne artikkelen har illustrert den komplette metoden for å bruke horisontal og vertikal polstring i Tailwind.