Kako dodati rob eni strani v Tailwind?

Kako Dodati Rob Eni Strani V Tailwind



V Tailwind CSS, a marža se uporablja za nadzor razmika okoli določenega elementa. Doda prostor med uporabljenim elementom in njegovimi okoliškimi elementi. Tailwind CSS ponuja nabor pripomočkov za robove in vrednosti robov, ki uporabnikom omogočajo prilagajanje razmika okoli želenih elementov. Poleg tega lahko uporabniki dodajo rob na posamezno stran, na primer na zgornji, spodnji, levi ali desni strani določenega elementa.

Ta spletni dnevnik bo pokazal primere dodajanja roba eni strani elementa v Tailwind CSS.







Kako dodati maržo eni strani v Tailwind?

Če želite dodati rob eni strani elementa v Tailwindu, lahko uporabite naslednje razrede uporabnosti:



Če želite bolje razumeti, si oglejte spodnje primere.



1. primer: dodajte rob na vrh elementa





V tem primeru bomo uporabili » mt-14 ' razred uporabnosti v '

” za dodajanje 14 enot roba na njegov vrh:

< telo >

< div razred = 'h-96 mt-14 bg-vijolična-500' >

< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >

div >

telo >


Tukaj:



    • h-96 ” nastavi višino vsebnika
      na 96 enot.
    • mt-14 ” razred uporabi 14 enot marže na vrhu vsebnika.
    • bg-vijolična-500 ” nastavi vijolično barvo za ozadje vsebnika.

Izhod


Zgornji rezultat kaže, da je bil rob dodan na vrh vsebnika.

2. primer: dodajte rob na dno elementa

V tem primeru bomo uporabili » mb-14 ' razred v '

”, da dodate 14 enot roba na dnu:

< telo >

< div razred = 'h-96 mb-14 bg-vijolična-500' >

< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >

div >

telo >


Izhod


Vidi se, da je bil rob dodan na dno posode.

3. primer: dodajte rob na levi strani elementa

V tem primeru bomo uporabili » ml-14 ' razred v '

” za dodajanje 14 enot roba na njegovi levi:

< telo >

< div razred = 'h-96 ml-14 bg-vijolična-500' >

< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >

div >

telo >


Izhod


Zgornji izhod kaže, da je bil rob dodan levo od elementa vsebnika.

4. primer: dodajte rob desno od elementa

V tem primeru bomo uporabili » mr-14 ' razred v '

” za dodajanje 14 enot roba na njegovi desni:

< telo >

< div razred = 'h-96 mr-14 bg-vijolična-500' >

< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >

div >

telo >


Izhod


Kot lahko vidite, je bil rob učinkovito dodan na desno vsebnika.

Zaključek

Če želite dodati rob eni strani elementa v Tailwindu, lahko uporabite različne razrede uporabnosti, kot je ' ml- ”, “ mr- ”, “ mt- «, in » mb- ”. Ti razredi dodajo rob na levi, desni, zgornji in spodnji strani določenega elementa. Uporabniki lahko določijo različne vrednosti za velikost roba. Ta spletni dnevnik prikazuje primere dodajanja roba eni strani elementa v Tailwind CSS.