Utiliti Ruang Luar dan Ruang Luar Automatik
Tambahkan ruang di luar elemen dengan utiliti m-*, gunakan mx-auto untuk pemusatan mendatar, dan gabungkan ruang luar berarah.
Utiliti Ruang Luar dan Ruang Luar Automatik ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Ruang Luar berbanding Ruang Dalam, Sekali Lagi
Ruang luar mewujudkan ruang di luar elemen, antara elemen itu dengan elemen bersebelahan. Berbeza daripada ruang dalam, ruang luar tidak menambah kawasan elemen yang boleh diklik atau keluasan latarnya. Ruang luar adalah telus — ia memaparkan apa sahaja yang berada di belakangnya. Gunakan ruang luar untuk memisahkan komponen (kad, bahagian, perenggan) antara satu sama lain, dan ruang dalam untuk mewujudkan ruang di dalam komponen.
<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>Ruang Luar Seragam: m-*
m-* menggunakan ruang luar yang sama pada keempat-empat sisi. m-0 biasanya digunakan untuk menggantikan ruang luar lalai pelayar — pelayar menambahkan ruang luar lalai pada elemen seperti <body>, <h1>, dan <p>. Tetapan semula CSS Preflight Tailwind membuang ruang ini, tetapi m-0 masih berguna apabila komponen pihak ketiga memperkenalkan ruang luar yang tidak dijangka.
<!-- 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>Utiliti Ruang Luar Berarah
Seperti ruang dalam, ruang luar mempunyai varian berarah: mt-* (ruang luar atas), mr-* (ruang luar kanan), mb-* (ruang luar bawah), ml-* (ruang luar kiri), mx-* (mendatar), my-* (menegak). Yang paling kerap digunakan ialah mb-* — menambahkan ruang luar di bawah tajuk dan perenggan untuk menghasilkan rentak menegak dalam susun atur teks.
<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: Helah Pemusatan
mx-auto ialah antara utiliti Tailwind yang paling banyak digunakan. Ia menetapkan margin-left: auto dan margin-right: auto, lalu memusatkan elemen blok secara mendatar dalam elemen induknya. Untuk berfungsi, elemen tersebut mesti mempunyai lebar yang ditentukan (sama ada lebar tetap atau lebar maksimum). Ia tidak berfungsi pada anak elemen flex atau grid — gunakan justify-center atau justify-self-center untuknya.
<!-- 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: Tolak ke Bawah
Dalam susun atur lajur flex, mt-auto menolak elemen ke bahagian bawah bekas dengan menggunakan semua ruang yang tersedia di atasnya. Ini ialah teknik standard untuk menghasilkan pengaki kad yang sentiasa berada di bahagian bawah, tanpa mengira jumlah kandungan dalam badan kad. Ia berfungsi dalam mana-mana bekas flex atau grid.
<!-- 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: Tolak ke Kanan
Dalam susun atur baris flex, ml-auto menolak elemen ke tepi kanan bekas flex dengan menggunakan semua ruang mendatar yang tersedia di sebelah kirinya. Ini ialah corak bar navigasi standard: logo di sebelah kiri, pautan navigasi di tengah, dan butang CTA ditolak ke kanan menggunakan 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>Kesedaran tentang Penggabungan Ruang Luar
CSS mempunyai konsep yang dipanggil penggabungan ruang luar: apabila ruang luar menegak bagi dua elemen aras blok bertemu, ruang yang lebih besar digunakan dan kedua-duanya bergabung, bukannya dijumlahkan. Contohnya, perenggan dengan mb-4 yang diikuti perenggan lain dengan mt-4 menghasilkan jumlah jarak 16px, bukannya 32px. Penggabungan ruang luar tidak berlaku dalam bekas flex atau grid — ia hanya berlaku antara adik-beradik aras blok dan blok induk-anak.
<!-- 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 -->
Ruang Luar dalam Rentak Menegak
Rentak menegak ialah jarak yang konsisten antara elemen tipografi, yang menjadikan kandungan terasa tersusun. Wujudkannya dengan ruang luar bawah yang konsisten: tajuk mendapat mb-4, perenggan mendapat mb-4, blok kod dan petikan blok mendapat mb-6, manakala tajuk bahagian mendapat mb-8. Gandaan yang konsisten ini menghasilkan rentak visual yang membimbing pandangan pembaca ke bawah.
<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>Ruang Luar Responsif
Ruang luar selalunya perlu diskalakan mengikut paparan. Ruang luar bawah bahagian mungkin mb-8 pada mudah alih dan mb-16 pada komputer meja. Kumpulan kad ciri mungkin menggunakan mt-8 md:mt-16 untuk menghasilkan jarak yang lebih luas di atasnya pada skrin besar yang mempunyai lebih banyak ruang. Pelarasan ruang luar responsif ialah cara pantas untuk menjadikan reka bentuk terasa sesuai pada setiap titik henti.
<section class="mt-8 md:mt-16 lg:mt-24">
Feature section with responsive top margin
</section>Menggunakan my-auto untuk Pemusatan Menegak
Dalam lajur flex atau grid dengan ketinggian yang ditentukan, my-auto memusatkan elemen secara menegak dengan menggunakan ruang yang tersedia secara sama rata di atas dan di bawahnya. Ini ialah alternatif kepada flex items-center untuk memusatkan satu anak elemen. Ia amat berguna apabila anda perlu memusatkan satu elemen tertentu dalam bekas yang mengandungi pelbagai jenis kandungan, apabila tidak semua elemen patut dipusatkan.
<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>Amali: Susun Atur Bahagian Artikel
Halaman artikel yang tersusun baik banyak menggunakan ruang luar untuk mengawal aliran: bekas kandungan utama menggunakan mx-auto max-w-3xl untuk memusatkannya, bahagian di dalamnya mendapat mb-12 sebagai jarak antara bahagian, bahagian utama mendapat mb-8 sebelum kandungan, dan bahagian bawah halaman mempunyai mb-24 yang luas supaya perenggan terakhir tidak terlalu hampir dengan pengaki.
<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>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, anda mempelajari bahawa: mx-auto memusatkan elemen blok yang mempunyai lebar ditentukan secara mendatar, mt-auto dalam lajur flex menolak elemen ke bahagian bawah bekasnya, dan ml-auto dalam baris flex menolak elemen ke tepi kanan. Seterusnya, kita akan meneroka ruang luar negatif dan utiliti space-between untuk mengawal jarak antara elemen adik-beradik.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Utiliti Ruang Luar dan Ruang Luar Automatik” percuma?
Ya — teks penuh “Utiliti Ruang Luar dan Ruang Luar Automatik” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Utiliti Ruang Luar dan Ruang Luar Automatik”?
Tambahkan ruang di luar elemen dengan utiliti m-*, gunakan mx-auto untuk pemusatan mendatar, dan gabungkan ruang luar berarah. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Utiliti Ruang Luar dan Ruang Luar Automatik” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Skala Jarak Tailwind
- Utiliti Ruang Dalam
- Utiliti Ruang Luar dan Ruang Luar Automatik
- Ruang Luar Negatif dan Jarak Antara