外边距实用程序与自动外边距
使用 m-* 实用程序在元素外部添加空间，使用 mx-auto 实现水平居中，并组合使用方向性外边距。
外边距实用程序与自动外边距 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「外边距实用程序与自动外边距」课时是免费的吗？
是的 — 「外边距实用程序与自动外边距」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「外边距实用程序与自动外边距」这节课中我会学到什么？
使用 m-* 实用程序在元素外部添加空间，使用 mx-auto 实现水平居中，并组合使用方向性外边距。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「外边距实用程序与自动外边距」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- Tailwind 间距刻度
- 内边距实用程序
- 外边距实用程序与自动外边距
- 负外边距与元素间距