Margin-utilities og auto-marginer
Tilføj plads uden for elementer med m-*-utilities, brug mx-auto til vandret centrering, og kombinér retningsbestemte marginer.
Margin-utilities og auto-marginer er en gratis Tailwind CSS Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Tailwind CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Udvendig kontra indvendig afstand – gentagelse
Udvendig afstand skaber plads uden for et element mellem elementet og de tilstødende elementer. I modsætning til indvendig afstand udvider udvendig afstand ikke elementets klikbare område eller baggrundens udstrækning. Udvendig afstand er gennemsigtig — den viser det, der ligger bag den. Brug udvendig afstand til at adskille komponenter (kort, sektioner og afsnit) fra hinanden, og indvendig afstand til at skabe plads inden i en komponent.
<div class="bg-blue-100 p-4 mb-4 rounded">
Card 1 — mb-4 creates 16px below this card
</div>
<div class="bg-blue-100 p-4 rounded">
Card 2 — pushed down by Card 1's margin
</div>Ensartet udvendig afstand: m-*
m-* anvender samme udvendige afstand på alle fire sider. m-0 bruges ofte til at tilsidesætte browserens standardmargener — browsere tilføjer standardmargener til elementer som <body>, <h1> og <p>. Tailwinds Preflight-nulstilling af CSS fjerner disse, men m-0 er stadig nyttig, når tredjepartskomponenter introducerer uventede margener.
<!-- Third-party component with default margin -->
<ThirdPartyWidget class="m-0" />
<!-- Adding space around all sides -->
<div class="m-4 bg-white rounded shadow p-4">
Floated card with all-side margin
</div>Retningsbestemte værktøjer til udvendig afstand
Ligesom indvendig afstand har udvendig afstand retningsbestemte varianter: mt-* (margin-top), mr-* (margin-right), mb-* (margin-bottom), ml-* (margin-left), mx-* (vandret) og my-* (lodret). Det mest almindeligt anvendte er mb-* — en bundmargen under overskrifter og afsnit skaber lodret rytme i tekst-layouts.
<article>
<h1 class="text-3xl font-bold mb-4">Article Title</h1>
<p class="text-gray-600 mb-6 text-lg">Lead paragraph with extra bottom space.</p>
<p class="text-gray-700 mb-4">Regular paragraph.</p>
<p class="text-gray-700 mb-4">Another paragraph.</p>
</article>mx-auto: Tricket til centrering
mx-auto er et af de mest anvendte Tailwind-værktøjer. Det angiver margin-left: auto og margin-right: auto, hvilket centrerer et blokelement vandret i dets overordnede element. For at det virker, skal elementet have en defineret bredde (enten en fast bredde eller en maksimal bredde). Det virker ikke på underordnede elementer i flex- eller gitter-layouts — de bruger justify-center eller justify-self-center.
<!-- Center a container: the most common pattern -->
<div class="max-w-2xl mx-auto px-4">
Centered content with maximum width
</div>
<!-- Center a specific element -->
<img src="logo.svg" class="w-32 mx-auto block" alt="Logo" />mt-auto: Skub til bunden
I et flex-layout med kolonner skubber mt-auto et element til bunden af containeren ved at optage al tilgængelig plads over det. Dette er den normale teknik til at skabe sidefødder på kort, som altid er placeret nederst, uanset hvor meget indhold der er i kortets brødtekst. Det fungerer i alle flex- eller gittercontainere.
<!-- Card with action button always at the bottom -->
<div class="flex flex-col h-64 bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-gray-900 mb-2">Card Title</h3>
<p class="text-gray-500 text-sm">Variable amount of card content here.</p>
<button class="mt-auto bg-indigo-600 text-white py-2 rounded-lg font-medium">
Action
</button>
</div>ml-auto: Skub til højre
I et flex-layout med rækker skubber ml-auto et element til højre kant af dets flex-container ved at optage al tilgængelig vandret plads til venstre for elementet. Dette er det normale mønster for navigationslinjer: logoet til venstre, navigationslinks i midten og en CTA-knap, der skubbes til højre med ml-auto.
<nav class="flex items-center px-6 py-4 bg-white border-b">
<span class="font-bold text-indigo-600">Brand</span>
<div class="flex gap-6 mx-8">
<a href="#" class="text-gray-600 text-sm">Home</a>
<a href="#" class="text-gray-600 text-sm">About</a>
</div>
<button class="ml-auto bg-indigo-600 text-white text-sm px-4 py-2 rounded">
Sign Up
</button>
</nav>Vær opmærksom på sammenfald af margener
CSS har et begreb, der kaldes sammenfald af margener: Når to blokelementers lodrette margener mødes, vinder den største margen, og margenerne flettes sammen i stedet for at blive lagt sammen. Et afsnit med mb-4 efterfulgt af et andet med mt-4 skaber for eksempel et samlet mellemrum på 16 px, ikke 32 px. Margensammenfald forekommer ikke i flex- eller gittercontainere — kun mellem søskendeelementer på blokniveau og blokke i forholdet overordnet-underordnet.
<!-- Margin collapse in block context -->
<p class="mb-4">Paragraph 1 (margin-bottom: 16px)</p>
<p class="mt-4">Paragraph 2 (margin-top: 16px)</p>
<!-- Gap between them = 16px, NOT 32px -->
<!-- No margin collapse in flex context -->
<div class="flex flex-col">
<p class="mb-4">Paragraph 1</p>
<p class="mt-4">Paragraph 2</p>
</div>
<!-- Gap between them = 32px -->
Udvendig afstand i lodret rytme
Lodret rytme er den ensartede afstand mellem typografiske elementer, som får indholdet til at virke organiseret. Skab den med ensartede bundmargener: Overskrifter får mb-4, afsnit får mb-4, kodeblokke og citatblokke får mb-6, og sektionsoverskrifter får mb-8. De ensartede multipla skaber en visuel rytme, der leder læserens blik nedad.
<article class="prose">
<h2 class="text-2xl font-bold mb-4">Section Title</h2>
<p class="mb-4">First paragraph.</p>
<p class="mb-4">Second paragraph.</p>
<pre class="mb-6 p-4 bg-gray-100 rounded">Code block</pre>
<p class="mb-4">Paragraph after code.</p>
</article>Responsive margener
Margener skal ofte skaleres med visningsområdet. Bundmargenen i en sektion kan være mb-8 på mobil og mb-16 på desktop. Grupper af funktionskort kan bruge mt-8 md:mt-16 for at skabe mere luft over dem på store skærme, hvor der er plads til det. Responsive justeringer af margener er en hurtig måde at få designs til at føles naturlige ved hvert brudpunkt.
<section class="mt-8 md:mt-16 lg:mt-24">
Feature section with responsive top margin
</section>Brug af my-auto til lodret centrering
I en flex-kolonne eller et gitter med en defineret højde centrerer my-auto et element lodret ved at optage den tilgængelige plads ligeligt over og under elementet. Dette er et alternativ til flex items-center, når du vil centrere ét enkelt underordnet element. Det er især nyttigt, når du skal centrere ét bestemt element i en container med blandet indhold, hvor ikke alle elementer skal centreres.
<div class="h-48 flex flex-col bg-gray-100 rounded-xl p-4">
<p class="text-sm text-gray-500">Top label</p>
<span class="my-auto text-2xl font-bold text-gray-900">
Centered number
</span>
<p class="text-xs text-gray-400">Bottom label</p>
</div>Praktisk: Layout af artikelsektion
En velstruktureret artikelside bruger udvendig afstand i vid udstrækning til at styre flowet: Hovedindholdscontaineren bruger mx-auto max-w-3xl til at centrere indholdet, sektionerne får mb-12 mellem sig, hero-sektionen har mb-8 før indholdet, og nederst på siden er der en generøs mb-24 for at forhindre, at det sidste afsnit kommer for tæt på sidefoden.
<main class="max-w-3xl mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-4xl font-bold">Article Title</h1>
</header>
<section class="mb-12">
<h2 class="text-2xl font-semibold mb-4">Section 1</h2>
<p class="text-gray-700 mb-4">Content...</p>
</section>
<section class="mb-24">
<h2 class="text-2xl font-semibold mb-4">Section 2</h2>
<p class="text-gray-700">Final section.</p>
</section>
</main>Hurtigt tjek
Test din forståelse af begreberne fra denne lektion om Tailwind CSS Mastery.
Opsummering af lektionen
I denne lektion lærte du, at mx-auto centrerer et blokelement vandret, når det har en defineret bredde, at mt-auto i en flex-kolonne skubber et element til bunden af containeren, og at ml-auto i en flex-række skubber et element til højre kant. Dernæst undersøger vi negative margener og space-between-værktøjerne til styring af mellemrum mellem søskendeelementer.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 30
- Lektioner
- 120
Ofte stillede spørgsmål
Er lektionen “Margin-utilities og auto-marginer” gratis?
Ja — hele teksten til “Margin-utilities og auto-marginer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Tailwind CSS Academy-kurset, skal du opgradere til CoddyKit PRO. Tailwind CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Margin-utilities og auto-marginer”?
Tilføj plads uden for elementer med m-*-utilities, brug mx-auto til vandret centrering, og kombinér retningsbestemte marginer. Du øver dig i Tailwind CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Tailwind CSS Academy?
Der kræves ingen tidligere erfaring. Tailwind CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Margin-utilities og auto-marginer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Tailwind CSS Academy-lektion?
Ja. Alle Tailwind CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Tailwinds afstandsskala
- Padding-utilities
- Margin-utilities og auto-marginer
- Negative marginer og afstand mellem elementer