Kaip pridėti maržą prie vienos pusės vėjo vėjo metu?

Kaip Prideti Marza Prie Vienos Puses Vejo Vejo Metu



Tailwind CSS, a marža naudojamas norint valdyti tarpą aplink konkretų elementą. Tai prideda erdvės tarp taikomo elemento ir jį supančių elementų. Tailwind CSS pateikia maržos paslaugų ir paraštės verčių rinkinį, leidžiantį vartotojams tinkinti tarpą aplink norimus elementus. Be to, vartotojai gali pridėti paraštę vienoje pusėje, pvz., konkretaus elemento viršuje, apačioje, kairėje arba dešinėje.

Šiame tinklaraštyje bus parodyti pavyzdžiai, kaip pridėti paraštę vienoje „Tailwind CSS“ elemento pusėje.







Kaip pridėti maržą prie vienos pusės vėjo vėjo metu?

Norėdami pridėti paraštę vienai „Tailwind“ elemento pusei, galima naudoti šias naudingumo klases:



Norėdami tai geriau suprasti, peržiūrėkite toliau pateiktus pavyzdžius.



1 pavyzdys: pridėkite paraštę prie elemento viršaus





Šiame pavyzdyje mes naudosime „ mt-14 'naudingumo klasė'

“ elementą, kad pridėtumėte 14 paraštės vienetų viršuje:

< kūnas >

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

< p klasė = 'text-5xl text-center' > Marža in Tailwind CSS p >

div >

kūnas >


Čia:



    • h-96 ” klasė nustato
      konteinerio aukštį į 96 vienetus.
    • mt-14 ” klasė konteinerio viršuje taiko 14 maržos vienetų.
    • bg-violetinė-500 “ klasė nustato purpurinę spalvą konteinerio fone.

Išvestis


Aukščiau pateikta išvestis rodo, kad paraštė buvo pridėta prie konteinerio viršaus.

2 pavyzdys: pridėkite paraštę prie elemento apačios

Šiame pavyzdyje mes naudosime „ mb-14 “ klasė “

“ elementą, kad jo apačioje pridėtumėte 14 paraštės vienetų:

< kūnas >

< div klasė = 'h-96 mb-14 bg-purple-500' >

< p klasė = 'text-5xl text-center' > Marža in Tailwind CSS p >

div >

kūnas >


Išvestis


Matyti, kad prie konteinerio dugno pridėta paraštė.

3 pavyzdys: pridėkite paraštę elemento kairėje

Šiame pavyzdyje mes naudosime „ ml-14 “ klasė “

“ elementą, kad pridėtumėte 14 paraštės vienetų kairėje:

< kūnas >

< div klasė = 'h-96 ml-14 bg-purple-500' >

< p klasė = 'text-5xl text-center' > Marža in Tailwind CSS p >

div >

kūnas >


Išvestis


Aukščiau pateikta išvestis rodo, kad paraštė buvo pridėta konteinerio elemento kairėje.

4 pavyzdys: pridėkite paraštę elemento dešinėje

Šiame pavyzdyje mes naudosime „ ponas-14 “ klasė “

“ elementą, kad pridėtumėte 14 paraštės vienetų dešinėje:

< kūnas >

< div klasė = 'h-96 mr-14 bg-purple-500' >

< p klasė = 'text-5xl text-center' > Marža in Tailwind CSS p >

div >

kūnas >


Išvestis


Kaip matote, paraštė buvo efektyviai pridėta konteinerio dešinėje.

Išvada

Norėdami pridėti paraštę prie vienos „Tailwind“ elemento pusės, galima naudoti įvairias naudingumo klases, pvz., „ ml- “, „ mr- “, „ mt- “ ir „ mb- “. Šios klasės atitinkamai prideda paraštę konkretaus elemento kairėje, dešinėje, viršuje ir apačioje. Vartotojai gali nurodyti skirtingas paraštės dydžio reikšmes. Šiame tinklaraštyje pateikti pavyzdžiai, kaip pridėti paraštę vienoje „Tailwind CSS“ elemento pusėje.