Tailwind CSS ponuja ' marža ”, ki uporabnikom omogočajo nadzor razmika okoli elementov. The vodoravni rob doda prostor na levo in desno stran elementa, medtem ko a navpični rob doda prostor na vrhu in na dnu elementa. Tailwind ponuja različne razrede uporabnosti za dodajanje vodoravnih ali navpičnih robov želenim elementom.
Ta članek bo ponazoril:
Kako dodati vodoravni rob v Tailwind?
Če želite elementu v Tailwindu dodati vodoravni rob, uporabite » mx-
Sintaksa
< element razred = 'mx-
Tu 'mx' predstavlja 'os x' ali 'vodoravni rob'. Prepričajte se, da zamenjate »
Primer: uporaba vodoravnega roba na element HTML
V tem primeru bomo uporabili » mx-10 ' razred uporabnosti z ' Če želite elementu v Tailwindu dodati navpični rob, uporabite » moj- Sintaksa Primer: uporaba navpičnega roba na element HTML V tem primeru bomo uporabili » moj-10 ' razred uporabnosti z ' Če želite dodati vodoravni in navpični rob v Tailwind, uporabite » mx-
< telo >
< div razred = 'h-screen mx-10 bg-vijolična-500' >
< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >
div >
telo >
Izhod 
Zgornji rezultat prikazuje rob na levi in desni strani vsebnika. To pomeni, da je bil vodoravni rob uspešno uporabljen za vsebniški element. Kako dodati navpični rob v Tailwind?
Tu 'moj' predstavlja 'os y' ali 'navpični rob'. Prepričajte se, da zamenjate »
< div razred = 'h-96 moj-10 bg-vijolična-500' >
< str razred = 'text-5xl center za besedilo' > Marža v CSS hrbtnega vetra str >
div >
telo >
Izhod 
Zgornji rezultat prikazuje rob na zgornji in spodnji strani vsebnika. To pomeni, da je bil navpični rob učinkovito uporabljen za vsebniški element. Zaključek