Utility-классы внешних отступов и автоматические отступы
Добавляйте пространство вокруг элементов с помощью utility-классов m-*, используйте mx-auto для горизонтального центрирования и комбинируйте отступы по направлениям.
«Utility-классы внешних отступов и автоматические отступы» — бесплатный урок Tailwind CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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.
Часто задаваемые вопросы
Урок «Utility-классы внешних отступов и автоматические отступы» бесплатный?
Да — полный текст урока «Utility-классы внешних отступов и автоматические отступы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Tailwind CSS Academy, подпишись на CoddyKit PRO. Курс Tailwind CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Utility-классы внешних отступов и автоматические отступы»?
Добавляйте пространство вокруг элементов с помощью utility-классов m-*, используйте mx-auto для горизонтального центрирования и комбинируйте отступы по направлениям. Ты практикуешь Tailwind CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Tailwind CSS Academy?
Предыдущий опыт не требуется. Tailwind CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Utility-классы внешних отступов и автоматические отступы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Tailwind CSS Academy?
Да. Каждый урок Tailwind CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Шкала отступов Tailwind
- Utility-классы внутренних отступов
- Utility-классы внешних отступов и автоматические отступы
- Отрицательные отступы и пространство между элементами