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 ' Izhod 2. primer: dodajte rob na dno elementa V tem primeru bomo uporabili » mb-14 ' razred v ' 3. primer: dodajte rob na levi strani elementa V tem primeru bomo uporabili » ml-14 ' razred v ' 4. primer: dodajte rob desno od elementa V tem primeru bomo uporabili » mr-14 ' razred v ' Če želite dodati rob eni strani elementa v Tailwindu, lahko uporabite različne razrede uporabnosti, kot je ' ml-
< 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:
Zgornji rezultat kaže, da je bil rob dodan na vrh vsebnika.
< 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.
< 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.
< 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