Hvordan legge til margin på en enkelt side i medvind?

Hvordan Legge Til Margin Pa En Enkelt Side I Medvind



I Tailwind CSS, en margin brukes til å kontrollere avstanden rundt det spesifikke elementet. Den legger til plass mellom det påførte elementet og dets omkringliggende elementer. Tailwind CSS gir et sett med marginverktøy og marginverdier som lar brukere tilpasse avstanden rundt ønskede elementer. Dessuten kan brukere legge til en marg på en enkelt side, for eksempel toppen, bunnen, venstre eller høyre for et bestemt element.

Denne bloggen vil vise eksempler for å legge til margin på en enkelt side av et element i Tailwind CSS.





Hvordan legge til margin på en enkelt side i medvind?

For å legge til margin på en enkelt side av et element i Tailwind, kan følgende verktøyklasser brukes:



For å forstå det bedre, gå gjennom eksemplene nedenfor.



Eksempel 1: Legg til marg til toppen av et element



I dette eksemplet vil vi bruke ' mt-14 ' bruksklasse i '

element for å legge til 14 marginenheter øverst:

< kropp >

< div klasse = 'h-96 mt-14 bg-lilla-500' >

< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >

div >

kropp >


Her:



    • ' h-96 ”-klassen setter høyden på
      -beholderen til 96 enheter.
    • ' mt-14 ” klasse gjelder 14 enheter margin til toppen av beholderen.
    • ' bg-lilla-500 ”-klassen setter den lilla fargen til bakgrunnen til beholderen.

Produksjon


Utdataene ovenfor viser at marginen er lagt til toppen av beholderen.

Eksempel 2: Legg til marg i bunnen av et element

I dette eksemplet vil vi bruke ' mb-14 '-klassen i '

'-element for å legge til 14 marginenheter nederst:

< kropp >

< div klasse = 'h-96 mb-14 bg-lilla-500' >

< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >

div >

kropp >


Produksjon


Det kan sees at marginen er lagt til beholderens bunn.

Eksempel 3: Legg til marg til venstre for et element

I dette eksemplet vil vi bruke ' ml-14 '-klassen i '

”-element for å legge til 14 marginenheter til venstre:

< kropp >

< div klasse = 'h-96 ml-14 bg-lilla-500' >

< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >

div >

kropp >


Produksjon


Utgangen ovenfor viser at margen er lagt til venstre for beholderelementet.

Eksempel 4: Legg til marg til høyre for et element

I dette eksemplet vil vi bruke ' mr-14 '-klassen i '

”-element for å legge til 14 marginenheter til høyre:

< kropp >

< div klasse = 'h-96 mr-14 bg-lilla-500' >

< s klasse = 'tekst-5xl tekstsenter' > Margin i Medvind CSS s >

div >

kropp >


Produksjon


Som du kan se, er marginen effektivt lagt til høyre for beholderen.

Konklusjon

For å legge til margin på en enkelt side av et element i Tailwind, kan forskjellige verktøyklasser brukes, for eksempel ' ml- ', ' mr- ', ' mt- ', og ' mb- '. Disse klassene legger til margin til det spesifikke elementets venstre, høyre, øvre og nedre side. Brukere kan spesifisere forskjellige verdier for størrelsen på margen. Denne bloggen har vist eksempler for å legge til margin på en enkelt side av et element i Tailwind CSS.

Annen

Kategori

Populære Innlegg

Linux Mint vs Windows 10 Speed ​​Test

Hvordan få SHA av den siste forpliktelsen fra Remote Git Repository?

Slik skanner du QR-kode på en bærbar datamaskin

Hvordan liste kjørende prosesser i Linux

Hva er standardplasseringen for feillogg Elasticsearch?

Hva er Ping Command og hvordan fungerer det i Windows?

Slik fjerner du Yellow Triangle på nettverkstilkobling i Windows 10

Slik konfigurerer du HDMI på Raspberry Pi

Hvordan høyrejustere en Div ved hjelp av CSS?

Opprett en Kubernetes-implementering

Hvordan stille inn tekstdekorasjonsstilen i Tailwind CSS

Hva betyr void i C, C++ og C#

SQL LTRIM()-funksjon

Hvordan bruke Amazon Textract Service fra AWS Dashboard?

Hvordan integrere HAProxy med PfSense for Enhanced Networking

Hva er Getter-funksjoner i C++?

Slik deaktiverer du IPv6 helt på Fedora Linux 39

Hvordan laste ned og kjøre CCleaner Professional i Windows?

Hvordan bruke flere klasser i ett element i CSS

Hvordan fungerer jQuery change()-metoden