Tailwind CSS-is a marginaal kasutatakse konkreetse elemendi ümber oleva vahemaa juhtimiseks. See lisab ruumi rakendatava elemendi ja seda ümbritsevate elementide vahele. Tailwind CSS pakub marginaaliutiliitide ja veerise väärtuste komplekti, mis võimaldab kasutajatel kohandada soovitud elementide vahekaugust. Lisaks saavad kasutajad lisada veerise ühele küljele, näiteks konkreetse elemendi ülemisele, alumisele, vasakule või paremale küljele.
See ajaveeb demonstreerib näiteid Tailwind CSS-i elemendi ühele küljele veerise lisamiseks.
Kuidas lisada tagatuules ühele küljele marginaali?
Tailwindis elemendi ühele küljele veerise lisamiseks saab kasutada järgmisi kasulikkuse klasse:
Selle paremaks mõistmiseks vaadake läbi alltoodud näited.
Näide 1: lisage veeris elemendi ülaosale
Selles näites kasutame ' mt-14 ' kasuliku klassi ' Väljund Näide 2: lisage veeris elemendi alla Selles näites kasutame ' mb-14 ' klassis ' Näide 3: lisage veeris elemendist vasakule Selles näites kasutame ' ml-14 ' klassis ' Näide 4: lisage veeris elemendist paremale Selles näites kasutame ' härra-14 ' klassis ' Tailwindis elemendi ühele küljele veerise lisamiseks saab kasutada erinevaid kasulikkuse klasse, näiteks ' ml-
< div klass = 'h-96 mt-14 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Siin:
Ülaltoodud väljund näitab, et konteineri ülaossa on veeris lisatud.
< div klass = 'h-96 mb-14 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Väljund
On näha, et konteineri põhjale on lisatud veeris.
< div klass = 'h-96 ml-14 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Väljund
Ülaltoodud väljund näitab, et veeris on lisatud konteineri elemendist vasakule.
< div klass = 'h-96 mr-14 bg-purple-500' >
< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >
div >
keha >
Väljund
Nagu näete, on veeris tõhusalt lisatud konteineri paremale. Järeldus