Tasarımda öğelerin "nefes almasını" sağlayan boşluklar, CSS'te Padding (İç Boşluk) ve Margin (Dış Boşluk) ile kontrol edilir. Tailwind CSS, piksel hesaplamalarıyla uğraşmadan, tutarlı bir ölçek kullanarak hızlıca boşluk vermenizi sağlar.
1. Tailwind Boşluk Mantığı (Syntax)
Tailwind'de boşluk sınıfları şu formül ile yazılır: {Özellik}-{Yön}-{Boyut}
Özellik: m (Margin) veya p (Padding)
Yön (Opsiyonel):
- t: Top (Üst)
- b: Bottom (Alt)
- l: Left (Sol)
- r: Right (Sağ)
- x: Yatay eksen (Sol ve Sağ)
- y: Dikey eksen (Üst ve Alt)
- (Hiçbir yön belirtilmezse 4 tarafı da kapsar)
Boyut: Sayısal değerler (1, 2, 4, 8...). Tailwind'de 1 birim = 0.25rem (4px)'dir.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
2. Padding (İç Boşluk) Kullanımı
Bir kutunun içeriği ile kenarları arasındaki mesafeyi ayarlar.
- p-4: Her yönden 16px (1rem) iç boşluk verir.
- px-6: Sadece soldan ve sağdan 24px boşluk verir.
- pt-10: Sadece üstten 40px boşluk verir.
<div class="bg-blue-200 p-8 text-center"> Bu kutunun içeriği kenarlardan uzak durur. </div>
3. Margin (Dış Boşluk) Kullanımı
Bir kutunun diğer kutularla arasındaki mesafeyi ayarlar.
- m-2: Her yönden 8px dış boşluk bırakır.
- my-4: Üstten ve alttan 16px boşluk bırakır.
- ml-auto: Sol tarafa otomatik boşluk vererek elemanı sağa yaslar (Flexbox ile sık kullanılır).
💡 Pro İpucu: Bir Kutuyu Sayfanın Ortasına Hizalamak (mx-auto)
Web tasarımda en çok aranan özelliklerden biri, bir elemanı (örneğin bir kartı veya konteyneri) sayfanın tam ortasına yerleştirmektir. Tailwind CSS'te bunu yapmak çok kolaydır ancak dikkat etmeniz gereken altın bir kural vardır.
Bir elemanı ortalamak için iki şartın aynı anda sağlanması gerekir:
- Genişlik Vermelisiniz (w-...): Elemana belirli bir genişlik vermezseniz, varsayılan olarak tüm satırı (%100) kaplar. Dolu olan bir satırda sağa veya sola kaydıracak yer kalmaz.
- Otomatik Margin Vermelisiniz (mx-auto): Bu komut tarayıcıya; "Elemanın genişliği haricinde kalan tüm boşluğu hesapla ve bu boşluğu sol ve sağ tarafa eşit olarak paylaştır" emrini verir.
Gelin kod üzerinde farkı görelim:
❌ Yanlış Kullanım (Genişlik Yok): Aşağıdaki kutu ortalanmaz çünkü genişlik belirtilmediği için ekranı kaplar.
<div class="mx-auto bg-red-500 text-white p-4"> Ben ortalanmadım çünkü genişliğim yok! </div>
✅ Doğru Kullanım (Genişlik + mx-auto): Aşağıdaki kutu, ekranın sadece bir kısmını kaplar ve kalan boşluk ikiye bölünerek kutu ortaya gelir.
<div class="w-1/2 mx-auto bg-green-500 text-white p-4 rounded"> Ben sayfanın tam ortasındayım! </div>
Özet: Bir div'i ortalamak istiyorsanız formül şudur: Belirli Genişlik (w-64) + mx-auto.
4. Negatif Margin
Bazen tasarımda öğeleri üst üste bindirmek isteyebilirsiniz. Bunun için sınıfın başına eksi (-) işareti koymanız yeterlidir.
- -mt-4: Üstten negatif 16px boşluk vererek elemanı yukarı çeker.
Bu derste boşluk yönetimini kavradık. Bir sonraki derste tasarımın görsel yüzü olan Renkler, Arka Planlar ve Opaklık konularına gireceğiz.