Utilitaires de marge et marges automatiques
Ajoutez de l’espace autour des éléments avec les utilitaires m-*, utilisez mx-auto pour le centrage horizontal et enchaînez les marges directionnelles.
Utilitaires de marge et marges automatiques est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Margin vs Padding Revisited
Margin creates space outside an element, between it and adjacent elements. Unlike padding, margin does not add to the element's clickable area or background extent. Margins are transparent — they show whatever is behind them. Use margin to separate components (cards, sections, paragraphs) from each other, and padding to create space within a component.
<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>Uniform Margin: m-*
m-* applies equal margin on all four sides. m-0 is commonly used to override default browser margins — browsers add default margin to elements like <body>, <h1>, and <p>. Tailwind's Preflight CSS reset removes these, but m-0 remains useful when third-party components introduce unexpected margins.
<!-- 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>Directional Margin Utilities
Like padding, margin has directional variants: mt-* (margin-top), mr-* (margin-right), mb-* (margin-bottom), ml-* (margin-left), mx-* (horizontal), my-* (vertical). The most commonly used is mb-* — adding bottom margin below headings and paragraphs to create vertical rhythm in text 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: The Centering Trick
mx-auto is one of the most used Tailwind utilities. It sets margin-left: auto and margin-right: auto, which horizontally centers a block element within its parent. For this to work, the element must have a defined width (either fixed or max-width). It does not work on flex or grid children — those use justify-center or 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: Push to Bottom
In a flex column layout, mt-auto pushes an element to the bottom of the container by consuming all available space above it. This is the standard technique for creating card footers that always sit at the bottom, regardless of how much content is in the card body. It works in any flex or grid container.
<!-- 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: Push to Right
In a flex row layout, ml-auto pushes an element to the right edge of its flex container by consuming all available horizontal space to its left. This is the standard navbar pattern: logo on the left, navigation links in the middle, and a CTA button pushed to the right with 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>Margin Collapse Awareness
CSS has a concept called margin collapse: when two block-level elements' vertical margins meet, the larger margin wins and the margins merge rather than add. For example, a paragraph with mb-4 followed by another with mt-4 creates a total gap of 16px, not 32px. Margin collapse does not occur in flex or grid containers — only between block-level siblings and parent-child blocks.
<!-- 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 -->
Margin in Vertical Rhythm
Vertical rhythm is the consistent spacing between typographic elements that makes content feel organized. Establish it with consistent bottom margins: headings get mb-4, paragraphs get mb-4, code blocks and blockquotes get mb-6, and section headings get mb-8. The consistent multiples create a visual beat that guides the reader's eye downward.
<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 Margins
Margins often need to scale with the viewport. Section bottom margins may be mb-8 on mobile and mb-16 on desktop. Feature card groups may use mt-8 md:mt-16 to create more generous spacing above them on large screens where there is room. Responsive margin adjustments are a quick win for making designs feel native at each breakpoint.
<section class="mt-8 md:mt-16 lg:mt-24">
Feature section with responsive top margin
</section>Using my-auto for Vertical Centering
In a flex column or grid with a defined height, my-auto vertically centers an element by consuming available space equally above and below it. This is an alternative to flex items-center for centering a single child element. It is particularly useful when you need to center one specific element in a mixed-content container where not all elements should be centered.
<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>Practical: Article Section Layout
A well-structured article page uses margin heavily for flow: the main content container uses mx-auto max-w-3xl to center it, sections within get mb-12 between them, the hero has mb-8 before the content, and the bottom of the page has a generous mb-24 to prevent the last paragraph from sitting too close to the footer.
<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>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: mx-auto horizontally centers a block element with a defined width, mt-auto in a flex column pushes an element to the bottom of its container, and ml-auto in a flex row pushes an element to the right edge. Next up we explore negative margins and the space-between utilities for controlling gaps between sibling elements.
Questions Fréquemment Posées
La leçon « Utilitaires de marge et marges automatiques » est-elle gratuite ?
Oui — le texte complet de « Utilitaires de marge et marges automatiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Utilitaires de marge et marges automatiques » ?
Ajoutez de l’espace autour des éléments avec les utilitaires m-*, utilisez mx-auto pour le centrage horizontal et enchaînez les marges directionnelles. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Utilitaires de marge et marges automatiques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- L’échelle d’espacement de Tailwind
- Utilitaires de remplissage intérieur
- Utilitaires de marge et marges automatiques
- Marges négatives et espacement entre éléments