Utilitas Margin dan Margin Otomatis
Tambahkan ruang di luar elemen dengan utilitas m-*, gunakan mx-auto untuk pemusatan horizontal, dan rangkai margin berdasarkan arah.
Utilitas Margin dan Margin Otomatis adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
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.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Utilitas Margin dan Margin Otomatis” gratis?
Ya — teks lengkap “Utilitas Margin dan Margin Otomatis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Utilitas Margin dan Margin Otomatis”?
Tambahkan ruang di luar elemen dengan utilitas m-*, gunakan mx-auto untuk pemusatan horizontal, dan rangkai margin berdasarkan arah. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Utilitas Margin dan Margin Otomatis” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Skala Spasi Tailwind
- Utilitas Padding
- Utilitas Margin dan Margin Otomatis
- Margin Negatif dan Jarak Antar-Elemen