Bruk av Avstandverktøy for Margin og Polstring
Du gjør en fantastisk jobb!
Riktig avstand er avgjørende for å skape visuelt tiltalende og godt strukturerte oppsett. Tidligere brukte vi margin- og padding-verktøyklasser, men la oss se nærmere på dem.
Margin
Margin-verktøy i Tailwind CSS lar deg kontrollere avstanden rundt elementer. De kan brukes med prefikset m- etterfulgt av en størrelsesverdi. Du kan legge til margin på alle sider, eller spesifikke sider (topp, høyre, bunn, venstre) ved å bruke de respektive prefiksene (mt-, mr-, mb-, ml-).
Eksempler
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Padding
Padding-verktøyene i Tailwind CSS ligner på margin-verktøyklassene, og logikken er den samme.
De kan brukes ved å benytte prefikset p- etterfulgt av en størrelsesverdi. Padding kan legges til på alle sider, eller på bestemte sider (topp, høyre, bunn, venstre) ved å bruke de respektive prefiksene (pt-, pr-, pb-, pl-).
Eksempler
| Padding Class | Description |
|---|---|
p-4 | Applies a padding of 1rem (16px) to all sides. |
pt-2 | Applies a padding of 0.5rem (8px) to the top side. |
pr-6 | Applies a padding of 1.5rem (24px) to the right side. |
pb-1 | Applies a padding of 0.25rem (4px) to the bottom side. |
pl-3 | Applies a padding of 0.75rem (12px) to the left side. |
index.html
Horisontal og vertikal avstand
I tillegg kan margin/padding brukes på den horisontale (_x-) eller vertikale (_y-) aksen.
Eksempler
| Class | Description |
|---|---|
mx-4 | Applies a margin of 1rem (16px) to the left and right sides. |
my-4 | Applies a margin of 1rem (16px) to the top and bottom sides. |
px-4 | Applies a padding of 1rem (16px) to the left and right sides. |
py-4 | Applies a padding of 1rem (16px) to the top and bottom sides. |
index.html
1. Hvilken klasse gir en margin på 1rem (16px) til alle sider av et element?
2. Hvordan legger du til en polstring på 0,5rem (8px) på toppen av et element?
3. Hva er Tailwind CSS-klassene for å legge til en margin på 2rem (32px) på topp- og bunnsidene av et element?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you explain the difference between margin and padding in more detail?
How do I choose the right spacing utility for my layout?
Are there responsive margin and padding classes in Tailwind CSS?
Awesome!
Completion rate improved to 3.57Bruk av Avstandverktøy for Margin og Polstring
Sveip for å vise menyen
Du gjør en fantastisk jobb!
Riktig avstand er avgjørende for å skape visuelt tiltalende og godt strukturerte oppsett. Tidligere brukte vi margin- og padding-verktøyklasser, men la oss se nærmere på dem.
Margin
Margin-verktøy i Tailwind CSS lar deg kontrollere avstanden rundt elementer. De kan brukes med prefikset m- etterfulgt av en størrelsesverdi. Du kan legge til margin på alle sider, eller spesifikke sider (topp, høyre, bunn, venstre) ved å bruke de respektive prefiksene (mt-, mr-, mb-, ml-).
Eksempler
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Padding
Padding-verktøyene i Tailwind CSS ligner på margin-verktøyklassene, og logikken er den samme.
De kan brukes ved å benytte prefikset p- etterfulgt av en størrelsesverdi. Padding kan legges til på alle sider, eller på bestemte sider (topp, høyre, bunn, venstre) ved å bruke de respektive prefiksene (pt-, pr-, pb-, pl-).
Eksempler
| Padding Class | Description |
|---|---|
p-4 | Applies a padding of 1rem (16px) to all sides. |
pt-2 | Applies a padding of 0.5rem (8px) to the top side. |
pr-6 | Applies a padding of 1.5rem (24px) to the right side. |
pb-1 | Applies a padding of 0.25rem (4px) to the bottom side. |
pl-3 | Applies a padding of 0.75rem (12px) to the left side. |
index.html
Horisontal og vertikal avstand
I tillegg kan margin/padding brukes på den horisontale (_x-) eller vertikale (_y-) aksen.
Eksempler
| Class | Description |
|---|---|
mx-4 | Applies a margin of 1rem (16px) to the left and right sides. |
my-4 | Applies a margin of 1rem (16px) to the top and bottom sides. |
px-4 | Applies a padding of 1rem (16px) to the left and right sides. |
py-4 | Applies a padding of 1rem (16px) to the top and bottom sides. |
index.html
1. Hvilken klasse gir en margin på 1rem (16px) til alle sider av et element?
2. Hvordan legger du til en polstring på 0,5rem (8px) på toppen av et element?
3. Hva er Tailwind CSS-klassene for å legge til en margin på 2rem (32px) på topp- og bunnsidene av et element?
Takk for tilbakemeldingene dine!
