Kuidas lisada tagatuules ühele küljele marginaali?

Kuidas Lisada Tagatuules Uhele Kuljele Marginaali



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 '

” element, et lisada selle ülaossa 14 ühikut veerist:

< keha >

< div klass = 'h-96 mt-14 bg-purple-500' >

< lk klass = 'tekst-5xl tekstikeskus' > Marginaal sisse Tailtuule CSS lk >

div >

keha >


Siin:



    • h-96 ” klass määrab konteineri
      kõrguseks 96 ühikut.
    • mt-14 ” klass rakendab mahuti ülaosale 14 ühikut varu.
    • bg-lilla-500 ” klass määrab konteineri taustale lilla värvi.

Väljund


Ülaltoodud väljund näitab, et konteineri ülaossa on veeris lisatud.

Näide 2: lisage veeris elemendi alla

Selles näites kasutame ' mb-14 ' klassis '

” element, et lisada selle allossa 14 ühikut veerist:

< keha >

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

Näide 3: lisage veeris elemendist vasakule

Selles näites kasutame ' ml-14 ' klassis '

” element, et lisada vasakule 14 ühikut veerist:

< keha >

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

Näide 4: lisage veeris elemendist paremale

Selles näites kasutame ' härra-14 ' klassis '

” element, et lisada sellest paremale 14 ühikut varu:

< keha >

< 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

Tailwindis elemendi ühele küljele veerise lisamiseks saab kasutada erinevaid kasulikkuse klasse, näiteks ' ml- ”, „ mr- ”, „ mt- ”, ja „ mb- ”. Need klassid lisavad veerise vastavalt konkreetse elemendi vasakule, paremale, ülemisele ja alumisele küljele. Kasutajad saavad määrata veerise suuruse jaoks erinevaid väärtusi. See ajaveeb on näidanud näiteid Tailwind CSS-i elemendi ühele küljele veerise lisamiseks.