Använda Avståndsverktyg för Marginal och Utfyllnad
Du gör ett fantastiskt jobb!
Korrekt avstånd är avgörande för att skapa visuellt tilltalande och välstrukturerade layouter. Tidigare använde vi verktygsklasser för marginal och utfyllnad, men låt oss nu titta närmare på dem.
Marginal
Marginalverktyg i Tailwind CSS gör det möjligt att kontrollera avståndet runt element. De används med prefixet m- följt av ett storleksvärde. Du kan applicera marginaler på alla sidor, eller specifika sidor (topp, höger, botten, vänster) med respektive prefix (mt-, mr-, mb-, ml-).
Exempel
| 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
Utfyllnad (Padding)
Utfyllnadsklasser i Tailwind CSS fungerar på liknande sätt som marginalklasser, och logiken är densamma.
De används med prefixet p- följt av ett storleksvärde. Utfyllnad kan appliceras på alla sidor, eller specifika sidor (topp, höger, botten, vänster) med respektive prefix (pt-, pr-, pb-, pl-).
Exempel
| 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
Horisontell och Vertikal Avstånd
Det är även möjligt att applicera marginaler/utfyllnad på den horisontella (_x-) eller vertikala (_y-) axeln.
Exempel
| 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. Vilken klass applicerar en marginal på 1rem (16px) på alla sidor av ett element?
2. Hur applicerar du en padding på 0,5rem (8px) på ovansidan av ett element?
3. Vilka är Tailwind CSS-klasserna för att applicera en marginal på 2rem (32px) på ett elements ovansida och undersida?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 3.57Använda Avståndsverktyg för Marginal och Utfyllnad
Svep för att visa menyn
Du gör ett fantastiskt jobb!
Korrekt avstånd är avgörande för att skapa visuellt tilltalande och välstrukturerade layouter. Tidigare använde vi verktygsklasser för marginal och utfyllnad, men låt oss nu titta närmare på dem.
Marginal
Marginalverktyg i Tailwind CSS gör det möjligt att kontrollera avståndet runt element. De används med prefixet m- följt av ett storleksvärde. Du kan applicera marginaler på alla sidor, eller specifika sidor (topp, höger, botten, vänster) med respektive prefix (mt-, mr-, mb-, ml-).
Exempel
| 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
Utfyllnad (Padding)
Utfyllnadsklasser i Tailwind CSS fungerar på liknande sätt som marginalklasser, och logiken är densamma.
De används med prefixet p- följt av ett storleksvärde. Utfyllnad kan appliceras på alla sidor, eller specifika sidor (topp, höger, botten, vänster) med respektive prefix (pt-, pr-, pb-, pl-).
Exempel
| 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
Horisontell och Vertikal Avstånd
Det är även möjligt att applicera marginaler/utfyllnad på den horisontella (_x-) eller vertikala (_y-) axeln.
Exempel
| 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. Vilken klass applicerar en marginal på 1rem (16px) på alla sidor av ett element?
2. Hur applicerar du en padding på 0,5rem (8px) på ovansidan av ett element?
3. Vilka är Tailwind CSS-klasserna för att applicera en marginal på 2rem (32px) på ett elements ovansida och undersida?
Tack för dina kommentarer!
