Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar
m-* yardımcı sınıflarıyla öğelerin dışına boşluk ekleyin, yatayda ortalamak için mx-auto kullanın ve yönlü dış boşlukları zincirleyin.
Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Kenar Boşluğu ve Dolguya Yeniden Bakış
Kenar boşluğu, bir öğenin dışında, öğe ile bitişik öğeler arasında boşluk oluşturur. Dolgudan farklı olarak kenar boşluğu, öğenin tıklanabilir alanını veya arka planının kapladığı alanı genişletmez. Kenar boşlukları saydamdır — arkalarında ne varsa onu gösterir. Bileşenleri (kartları, bölümleri, paragrafları) birbirinden ayırmak için kenar boşluğu, bir bileşenin içinde boşluk oluşturmak içinse dolgu kullanın.
<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>Tekdüze Kenar Boşluğu: m-*
m-* dört kenarın tamamına eşit kenar boşluğu uygular. m-0, tarayıcının varsayılan kenar boşluklarını geçersiz kılmak için yaygın olarak kullanılır — tarayıcılar <body>, <h1> ve <p> gibi öğelere varsayılan kenar boşluğu ekler. Tailwind'in Preflight CSS sıfırlaması bunları kaldırır, ancak üçüncü taraf bileşenler beklenmedik kenar boşlukları eklediğinde m-0 kullanışlı olmaya devam eder.
<!-- 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>Yönlü Kenar Boşluğu Yardımcıları
Dolgu gibi kenar boşluğunun da yönlere özel sürümleri vardır: mt-* (üst kenar boşluğu), mr-* (sağ kenar boşluğu), mb-* (alt kenar boşluğu), ml-* (sol kenar boşluğu), mx-* (yatay), my-* (dikey). En sık kullanılanı mb-* yardımcı sınıfıdır — metin düzenlerinde dikey ritim oluşturmak için başlıkların ve paragrafların altına kenar boşluğu ekler.
<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: Ortalamayı Sağlayan Yöntem
mx-auto, en çok kullanılan Tailwind yardımcı sınıflarından biridir. margin-left: auto ve margin-right: auto değerlerini ayarlayarak blok öğesini üst öğesi içinde yatay olarak ortalar. Bunun çalışması için öğenin tanımlı bir genişliğe (sabit veya maksimum genişlik) sahip olması gerekir. Flex ya da ızgara alt öğelerinde çalışmaz — bunlar için justify-center veya justify-self-center kullanılır.
<!-- 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: Alta İtme
Flex sütun düzeninde mt-auto, üzerindeki kullanılabilir alanın tamamını tüketerek öğeyi kapsayıcının altına iter. Bu, kart gövdesinde ne kadar içerik olursa olsun kart alt bilgilerini her zaman alta yerleştirmek için kullanılan standart tekniktir. Herhangi bir flex veya ızgara kapsayıcısında çalışır.
<!-- 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: Sağa İtme
Flex satır düzeninde ml-auto, solundaki kullanılabilir yatay alanın tamamını tüketerek öğeyi flex kapsayıcısının sağ kenarına iter. Bu, standart gezinme çubuğu düzenidir: solda logo, ortada gezinme bağlantıları ve ml-auto ile sağa itilmiş bir CTA düğmesi.
<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>Kenar Boşluğu Birleşmesine Dikkat
CSS'de kenar boşluğu birleşmesi adı verilen bir kavram vardır: blok düzeyindeki iki öğenin dikey kenar boşlukları birleştiğinde, kenar boşlukları toplanmak yerine büyük olan geçerli olur ve boşluklar birleşir. Örneğin, mb-4 kullanılan bir paragrafın ardından mt-4 kullanılan başka bir paragraf gelirse toplam boşluk 32px değil, 16px olur. Kenar boşluğu birleşmesi flex veya ızgara kapsayıcılarında gerçekleşmez — yalnızca blok düzeyindeki kardeşler ile üst-alt bloklar arasında gerçekleşir.
<!-- 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 -->
Dikey Ritminde Kenar Boşluğu
Dikey ritim, içeriğin düzenli görünmesini sağlayan tipografik öğeler arasındaki tutarlı boşluktur. Bunu tutarlı alt kenar boşluklarıyla oluşturun: başlıklara mb-4, paragraflara mb-4, kod blokları ve alıntı bloklarına mb-6, bölüm başlıklarına ise mb-8 verin. Tutarlı katlar, okuyucunun gözünü aşağı doğru yönlendiren görsel bir ritim oluşturur.
<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>Duyarlı Kenar Boşlukları
Kenar boşluklarının genellikle görüntü alanına göre ölçeklenmesi gerekir. Bölümlerin alt kenar boşluğu mobilde mb-8, masaüstünde mb-16 olabilir. Özellik kartı gruplarında, geniş ekranlarda daha fazla alan bulunduğundan üstte daha cömert bir boşluk oluşturmak için mt-8 md:mt-16 kullanılabilir. Duyarlı kenar boşluğu ayarlamaları, tasarımların her kesme noktasında yerel görünümlü olmasını sağlamanın hızlı bir yoludur.
<section class="mt-8 md:mt-16 lg:mt-24">
Feature section with responsive top margin
</section>Dikey Ortalamada my-auto Kullanımı
Tanımlı yüksekliğe sahip bir flex sütununda veya ızgarada my-auto, kullanılabilir alanı üstte ve altta eşit tüketerek bir öğeyi dikey olarak ortalar. Bu, tek bir alt öğeyi ortalamak için flex items-center kullanımına bir alternatiftir. Tüm öğelerin ortalanmaması gereken, farklı içerikler barındıran bir kapsayıcıda belirli bir öğeyi ortalamanız gerektiğinde özellikle kullanışlıdır.
<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>Uygulama: Makale Bölümü Düzeni
İyi yapılandırılmış bir makale sayfası akış için kenar boşluğunu yoğun biçimde kullanır: ana içerik kapsayıcısını ortalamak için mx-auto max-w-3xl kullanılır, bölümlerin arasına mb-12 verilir, kahraman alanının içerikten önce mb-8 kenar boşluğu bulunur ve son paragrafın alt bilgiye çok yaklaşmasını önlemek için sayfanın altında cömert bir mb-24 bulunur.
<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>Hızlı Kontrol
Bu dersteki Tailwind CSS Ustalığı kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: mx-auto, tanımlı genişliğe sahip bir blok öğesini yatay olarak ortalar, flex sütunundaki mt-auto bir öğeyi kapsayıcısının altına iter ve flex satırındaki ml-auto bir öğeyi sağ kenara iter. Sırada negatif kenar boşluklarını ve kardeş öğeler arasındaki boşlukları denetlemek için space-between yardımcı sınıflarını inceleyeceksiniz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar” dersi ücretsiz mi?
Evet — “Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar” dersinde ne öğreneceğim?
m-* yardımcı sınıflarıyla öğelerin dışına boşluk ekleyin, yatayda ortalamak için mx-auto kullanın ve yönlü dış boşlukları zincirleyin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tailwind Boşluk Ölçeği
- İç Boşluk Yardımcı Sınıfları
- Dış Boşluk Yardımcı Sınıfları ve Otomatik Dış Boşluklar
- Negatif Dış Boşluklar ve Öğeler Arası Boşluk