Gebruik van Spacing Utilities voor Marge en Opvulling
Je bent fantastisch bezig!
Juiste afstand is essentieel voor het creëren van visueel aantrekkelijke en goed gestructureerde lay-outs. Eerder hebben we marge- en opvulhulpprogramma's gebruikt, maar laten we hier dieper op ingaan.
Marge
Marge-hulpprogramma's in Tailwind CSS bieden controle over de ruimte rondom elementen. Ze worden toegepast met het voorvoegsel m-, gevolgd door een waarde voor de grootte. Marges kunnen op alle zijden worden toegepast, of op specifieke zijden (boven, rechts, onder, links) met de respectievelijke voorvoegsels (mt-, mr-, mb-, ml-).
Voorbeelden
| 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-hulpprogramma's in Tailwind CSS zijn vergelijkbaar met de marge-hulpprogramma's, en de logica blijft hetzelfde.
Ze kunnen worden toegepast met het voorvoegsel p-, gevolgd door een waarde voor de grootte. Padding kan op alle zijden worden toegepast, of op specifieke zijden (boven, rechts, onder, links) met de respectievelijke voorvoegsels (pt-, pr-, pb-, pl-).
Voorbeelden
| 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
Horizontale en verticale afstand
Daarnaast kunnen marges/padding worden toegepast op de horizontale (_x-) of verticale (_y-) as.
Voorbeelden
| 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. Welke klasse past een marge van 1rem (16px) toe op alle zijden van een element?
2. Hoe pas je een padding van 0,5rem (8px) toe aan de bovenkant van een element?
3. Wat zijn de Tailwind CSS-klassen om een marge van 2rem (32px) toe te passen op de boven- en onderkant van een element?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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.57Gebruik van Spacing Utilities voor Marge en Opvulling
Veeg om het menu te tonen
Je bent fantastisch bezig!
Juiste afstand is essentieel voor het creëren van visueel aantrekkelijke en goed gestructureerde lay-outs. Eerder hebben we marge- en opvulhulpprogramma's gebruikt, maar laten we hier dieper op ingaan.
Marge
Marge-hulpprogramma's in Tailwind CSS bieden controle over de ruimte rondom elementen. Ze worden toegepast met het voorvoegsel m-, gevolgd door een waarde voor de grootte. Marges kunnen op alle zijden worden toegepast, of op specifieke zijden (boven, rechts, onder, links) met de respectievelijke voorvoegsels (mt-, mr-, mb-, ml-).
Voorbeelden
| 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-hulpprogramma's in Tailwind CSS zijn vergelijkbaar met de marge-hulpprogramma's, en de logica blijft hetzelfde.
Ze kunnen worden toegepast met het voorvoegsel p-, gevolgd door een waarde voor de grootte. Padding kan op alle zijden worden toegepast, of op specifieke zijden (boven, rechts, onder, links) met de respectievelijke voorvoegsels (pt-, pr-, pb-, pl-).
Voorbeelden
| 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
Horizontale en verticale afstand
Daarnaast kunnen marges/padding worden toegepast op de horizontale (_x-) of verticale (_y-) as.
Voorbeelden
| 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. Welke klasse past een marge van 1rem (16px) toe op alle zijden van een element?
2. Hoe pas je een padding van 0,5rem (8px) toe aan de bovenkant van een element?
3. Wat zijn de Tailwind CSS-klassen om een marge van 2rem (32px) toe te passen op de boven- en onderkant van een element?
Bedankt voor je feedback!
