Tailwind CSS tarjoaa ' marginaali ” hyödyllisyysluokat, joiden avulla käyttäjät voivat hallita elementtien väliä. The vaakamarginaali lisää tilaa elementin vasemmalle ja oikealle puolelle, kun taas a pystymarginaali lisää tilaa elementin ylä- ja alaosaan. Tailwind tarjoaa useita hyödyllisyysluokkia vaaka- tai pystyreunojen lisäämiseksi haluttuihin elementteihin.
Tämä artikkeli on esimerkki:
Kuinka lisätä vaakasuora marginaali myötätuulessa?
Jos haluat lisätä vaakamarginaalin Tailwindin elementtiin, ' mx-
Syntaksi
< elementti luokkaa = 'mx-
Tässä 'mx' edustaa 'x-akselia' tai 'vaakamarginaalia'. Muista korvata '
Esimerkki: Vaakamarginaalin käyttäminen HTML-elementtiin
Tässä esimerkissä käytämme ' mx-10 ' hyötyluokka ' Voit lisätä pystyreunuksen Tailwindin elementtiin käyttämällä ' minun- Syntaksi Esimerkki: Pystymarginaalin käyttäminen HTML-elementissä Tässä esimerkissä käytämme ' minun-10 ' hyötyluokka ' Lisää vaaka- ja pystymarginaali Tailwindissä ' mx-
< kehon >
< div luokkaa = 'h-screen mx-10 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Lähtö
Yllä oleva tulos näyttää marginaalin säiliön vasemmalla ja oikealla puolella. Tämä osoittaa, että vaakamarginaali on lisätty säiliöelementtiin onnistuneesti. Kuinka lisätä pystysuuntainen marginaali myötätuulessa?
Tässä 'my' edustaa 'y-akselia' tai 'pystymarginaalia'. Muista korvata '
< div luokkaa = 'h-96 my-10 bg-purple-500' >
< s luokkaa = 'text-5xl text-center' > Marginaali sisään Tailwind CSS s >
div >
kehon >
Lähtö
Yllä oleva tulos näyttää marginaalin säiliön ylä- ja alapuolelle. Tämä osoittaa, että pystymarginaali on käytetty tehokkaasti säiliöelementissä. Johtopäätös