Tailwind CSS Padding ve Margin: Boşluk Ölçeği Nasıl Çalışır?

Boşluk ölçeği: tek değişken, sınırsız adım

Eski sürümlerde boşluk değerleri tek tek tanımlanmış bir tablodan gelirdi. v4.3.5 ile derlenen CSS ise farklı bir yol izler: tema katmanında yalnızca --spacing: 0.25rem tanımlıdır ve her boşluk sınıfı bu değeri sınıf adındaki sayıyla çarpan bir calc() ifadesi üretir. Bunun pratik sonucu, ölçeğin bir listeyle sınırlı olmamasıdır. Tablolarda pek görmediğiniz p-13 de, çeyrek adımlı p-2.25 de sorunsuz derlenir.

Sınırsız ama her şeyi kabul eden bir sistem değildir. Denemelerimizde p-2.3 gibi çeyreğin katı olmayan bir ondalık, p-1/2 gibi bir kesir ya da p-full gibi bir anahtar sözcük için CLI hiçbir hata vermeden tek satır CSS bile üretmedi. Tailwind tanımadığı sınıfları sessizce atlar; bu yüzden "sınıfı yazdım ama hiçbir şey değişmedi" durumunda ilk bakacağınız yer, değerin geçerli bir adım olup olmadığıdır. Genel teşhis için Tailwind sınıfı çalışmıyor yazısı daha geniş bir kontrol listesi sunar.

Tablodaki piksel sütunu yalnızca bir okuma kolaylığıdır ve kök yazı boyutunun 16px olduğunu varsayar. Kullanıcı tarayıcısında varsayılan yazı boyutunu büyüttüyse rem tabanlı tüm boşluklar da onunla birlikte büyür. p-px ise ölçeğin dışında kalır: değeri her zaman tam 1px'tir ve ince ayar için kullanılır. Tablonun ilk satırlarına da dikkat edin: CLI, sıfır ve bir adımı sadeleştirerek yazar. p-0 çarpım yerine doğrudan padding: 0px, p-1 ise padding: var(--spacing) üretir; sonuç aynıdır, yalnızca gereksiz çarpma atlanır. m-1, w-1 ve gap-1 gibi sınıflarda da aynı kısaltmayı görürsünüz.

Padding sınıfları: hangi harf hangi kenar

Padding ailesinde on bir ön ek vardır. p dört kenarın hepsine, pt, pr, pb, pl sırasıyla üst, sağ, alt ve sol kenara uygulanır. px yatay, py dikey eksendir. Resmî padding sayfası bunlara ek olarak metin yönüne göre çalışan ps ve pe ile yazım moduna göre çalışan pbs ve pbe sınıflarını da listeler. Aşağıdaki küçük kartta üç farklı türü bir arada kullandık:

<div class="p-4 px-6 pt-2">
  <h2 class="mb-3">Başlık</h2>
  <p class="ms-4 -mt-1">Metin</p>
</div>

@layer utilities {
  .ms-4 {
    margin-inline-start: calc(var(--spacing) * 4);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
}

v4.3.5 ile derlenen bu CSS'te üç ayrıntı dikkat çeker. Birincisi, px-6 sınıfı padding-left ve padding-right değil, tek satırlık padding-inline üretir; py sınıfları da aynı şekilde padding-block yazar. Soldan sağa yazılan Türkçe bir sayfada sonuç aynıdır, ancak üretilen CSS'i okurken bu adları görmeyi beklemelisiniz. İkincisi, kurallar HTML'deki sıraya göre değil Tailwind'in kendi sıralamasına göre dizilir: genel p-4 önce, daha dar kapsamlı px-6 ve pt-2 sonra gelir. Böylece aynı elemanda hem p-4 hem px-6 varsa yatay kenarlarda 1.5rem, dikeyde 1rem kalır; üstte ise pt-2 kazanır ve 0.5rem olur. Üçüncüsü, kullanmadığınız hiçbir yön sınıfı çıktıya girmez.

Margin sınıfları, negatif değerler ve auto

Margin tarafında ön ekler birebir aynıdır: m, mx, my, mt, mr, mb, ml, ms, me, mbs, mbe. Padding'den ayrıldığı iki nokta vardır: negatif değer ve auto. Sınıf adının başına eksi koyduğunuzda Tailwind çarpanı eksiye çevirir; yukarıdaki örnekte -mt-1 sınıfının calc(var(--spacing) * -1) ürettiğini görüyorsunuz. Resmî margin sayfasındaki örnek, bir kutunun önceki kutunun üzerine binmesi için -mt-8 kullanır. Padding için eksi sürüm yoktur; -p-4 yazdığınızda CLI hiçbir kural üretmedi, çünkü CSS'te negatif padding geçerli değildir.

auto değeri ise tarayıcının kalan boşluğu kendisinin paylaştırmasını ister. mx-auto, margin-inline: auto üretir ve genişliği belli olan blok bir elemanı yatayda ortalamanın en yaygın yoludur. ml-auto ise bir flex satırında elemanı sağa iter. Ortalama tekniklerinin hepsini karşılaştırmalı görmek isterseniz Tailwind ile div ortalama yazısı daha ayrıntılıdır.

<section class="py-6 md:py-12 lg:px-20">
  <div class="mx-auto w-80">Ortalanmış blok</div>
</section>

@layer utilities {
  .mx-auto {
    margin-inline: auto;
  }
  .w-80 {
    width: calc(var(--spacing) * 80);
  }
  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }
  @media (width >= 48rem) {
    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }
  }
  @media (width >= 64rem) {
    .lg\:px-20 {
      padding-inline: calc(var(--spacing) * 20);
    }
  }
}

Bu örnekte iki şey birlikte çalışıyor. İç blok w-80 ile 20rem genişlik alıyor ve mx-auto sayesinde bölümün ortasına yerleşiyor; genişlik vermeden mx-auto kullanırsanız blok zaten tüm satırı kapladığı için ortalanacak bir boşluk kalmaz. Dış bölüm ise mobilde py-6 ile 1.5rem dikey boşlukla başlıyor, md ve üstünde (@media (width >= 48rem)) 3rem'e çıkıyor, lg ve üstünde yatay boşluk da ekleniyor. Önek sırası ve kırılım noktaları responsive tasarım: sm, md, lg yazısının konusu.

Negatif keyfi değerde iki yazım

Keyfi bir değeri negatif yapmanın iki yolu vardır ve ürettikleri CSS aynı değildir. -m-[5px] yazdığınızda Tailwind değeri calc(5px * -1) ile çevirir. m-[-5px] yazdığınızda ise köşeli parantezin içindekini olduğu gibi kopyalar ve margin: -5px elde edersiniz. Sonuç tarayıcıda aynı mesafedir, ama ekipte tek bir yazımda anlaşmak sınıf listelerini okunur tutar. Ölçekte karşılığı olan değerler için bu ikisine de gerek yoktur: canonicalize komutu mt-[-2rem] sınıfını -mt-8 olarak sadeleştirdi.

Mantıksal özellikler: ps, pe, ms, me

ps, pe, ms ve me sınıfları fiziksel sol ve sağ yerine metnin başlangıç ve bitiş tarafını hedefler. Soldan sağa bir sayfada ms-4 sol margin gibi davranır; aynı eleman dir="rtl" olan bir kapsayıcıya girdiğinde ise sağ tarafa geçer. Resmî sayfalar bunu yan yana iki örnekle gösterir. Türkçe ve İngilizce gibi yalnızca soldan sağa dillerde yayın yapıyorsanız fark hissedilmez; ancak Arapça veya Farsça bir sürüm planlıyorsanız baştan mantıksal sınıfları seçmek sonradan tüm şablonu ters çevirme ihtiyacını ortadan kaldırır.

Dikey eksendeki karşılıklar pbs, pbe, mbs ve mbe sınıflarıdır; bunlar yazım moduna bakar ve yatay yazılan bir sayfada üst ve alt kenarla eşleşir. Günlük işlerde nadiren gerekir ama, ilk örnekte gördüğünüz gibi, px ve py sınıflarının zaten mantıksal özellik ürettiğini bilmek çıktıyı okurken kafa karışıklığını önler.

Keyfi değerler ve CSS değişkenleri

Ölçekte olmayan bir değer gerektiğinde köşeli parantez kullanırsınız: p-[5px] doğrudan padding: 5px yazar. Boşluk içeren bir değer için boşluğun yerine alt çizgi koyarsınız; p-[1rem_2rem] sınıfı padding: 1rem 2rem üretti. Hesaplama da yazabilirsiniz: mt-[calc(100%-2rem)] derlendiğinde Tailwind eksi işaretinin çevresine boşlukları kendisi ekledi ve margin-top: calc(100% - 2rem) çıktı.

Değeri bir CSS değişkeninden almak istiyorsanız parantezli kısa yazım vardır: p-(--my-padding), padding: var(--my-padding) üretir. Resmî sayfanın ifadesiyle bu, var() sarmalayıcısını sizin yerinize ekleyen bir kısaltmadır. Keyfi değerlerin bütün kuralları (tür ipuçları, alt çizginin kaçırılması, keyfi özellikler) arbitrary values yazısında, tema değerini doğrudan CSS içinde hesaplayan --spacing() fonksiyonu da --spacing() ve --alpha() fonksiyonları yazısında anlatılıyor.

Ölçeği kendi temanıza göre değiştirmek

Bütün p-*, m-* ve resmî sayfalarla CLI çıktısının gösterdiği gibi w-*, h-*, gap-*, inset-* gibi sayısal sınıflar aynı --spacing değişkenine dayanır. Bu yüzden tek bir satırla bütün ölçeği değiştirebilirsiniz. Resmî padding sayfasındaki örnek değeri 1px yapar; aşağıda buna bir de adlandırılmış değer ekledik:

@import "tailwindcss";
@theme {
  --spacing: 1px;
  --spacing-lg: 3rem;
}

<div class="m-2 p-4">
  <div class="p-lg">Adlandırılmış boşluk</div>
</div>

@layer theme {
  :root, :host {
    /* (kısaltıldı) */
    --spacing: 1px;
    /* (kısaltıldı) */
    --spacing-lg: 3rem;
  }
}
/* (kısaltıldı) */
@layer utilities {
  .m-2 {
    margin: calc(var(--spacing) * 2);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-lg {
    padding: var(--spacing-lg);
  }
}

Sınıfların ürettiği formül değişmedi, değişen yalnızca değişkenin değeri: artık p-4 4px, m-2 2px eder. Bu yüzden mevcut bir projede --spacing değerini değiştirmek, kullandığınız bütün sayısal sınıfların boyutunu aynı anda değiştirir; küçük bir deneme sayfasında sonucu görmeden yapılmaması gereken bir değişikliktir. --spacing-lg ise yeni bir ad tanımlar ve p-lg, çarpım yerine doğrudan var(--spacing-lg) kullanır. Tema ad alanlarının tamamı @theme direktifi yazısında.

Sık yapılan hatalar

• Geçersiz adım yazmak: p-2.3, p-1/2 veya p-full hata vermez, yalnızca CSS üretmez. Değer çeyreğin katı değilse keyfi değer kullanın.
• Negatif padding beklemek: -p-4 diye bir sınıf yoktur. Bir elemanı içeri çekmek istiyorsanız komşusuna negatif margin verin.
• Genişliksiz mx-auto: blok eleman zaten tam genişlikteyse ortalanacak boşluk kalmaz. Önce w-* veya max-w-* verin.
• Kenar boşluklarının tarayıcıdan geldiğini sanmak: Preflight her elemanda margin: 0 ve padding: 0 ile başlar; başlık ve paragraflar arasındaki boşluğu siz vermezseniz olmaz. Ayrıntılar Preflight temel stiller yazısında.
• Boşluğu kardeşler arasında tek tek vermek: Bir listedeki her öğeye mb-4 yazmak yerine kapsayıcıda gap-4 çoğu zaman daha temizdir. Seçim ölçütleri gap, space-x ve divide yazısında.

Preflight'ın box-sizing: border-box kuralını da unutmayın: padding, elemana verdiğiniz genişliğin içinden yenir. 20rem genişliğindeki bir kutuya p-4 verdiğinizde kutu büyümez, içerik alanı küçülür. Bu davranışı tek bir eleman için değiştirmeniz gerekirse box-content sınıfı vardır; width, height ve size sınıfları yazısında birlikte ele aldık.

canonicalize ile sınıf listesini sadeleştirmek

Uzun sınıf listelerinde gereksiz tekrarlar birikir. Standalone CLI'daki canonicalize komutu, aynı anlama gelen bir grup sınıfı daha kısa eşdeğerine çevirir. Aynı satırda verdiğimiz px-4 py-4 grubu p-4 oldu, pt-2 pb-2 grubu py-2, dört ayrı mt-4 mb-4 ml-2 mr-2 ise mx-2 my-4. Ölçekteki bir değere denk gelen keyfi değerleri de sadeleştirir: m-[0px] sınıfı m-0 oldu. Piksel yazılmış p-[16px] ise olduğu gibi kaldı, çünkü rem tabanlı ölçekte birebir karşılığı yok.

tailwindcss canonicalize "px-4 py-4" "pt-2 pb-2" "mt-[-2rem]"
# p-4
# py-2
# -mt-8

Komut her tırnaklı grubu ayrı bir satırda yanıtlar. Projenizdeki dosyaları değiştirmez; yalnızca öneri verir. Komutun diğer seçenekleri ve --stream kullanımı Tailwind CLI standalone kullanımı yazısında.

Sık Sorulan Sorular

p-4 kaç piksel eder?

p-4, calc(var(--spacing) * 4) üretir. Varsayılan --spacing 0.25rem olduğundan sonuç 1rem'dir; kök yazı boyutu 16px ise 16px eder. Kullanıcı tarayıcıda yazı boyutunu değiştirdiyse rem değeri de ona göre değişir.

px-4 ile pl-4 pr-4 aynı mı?

Soldan sağa bir sayfada görsel sonuç aynıdır. Fark üretilen CSS'tedir: px-4 mantıksal padding-inline özelliğini, pl-4 ve pr-4 fiziksel padding-left ve padding-right özelliklerini yazar. canonicalize komutu da px-4 py-4 grubunu tek bir p-4 sınıfına indirir.

Ölçekte olmayan bir değer, örneğin 18px, nasıl verilir?

p-[18px] gibi keyfi bir değer yazabilirsiniz. 16px kökte 18px, 4.5 adıma denk geldiği için p-4.5 da derlenir ve bu sefer değer rem tabanlı kalır. Sık kullanacaksanız temaya --spacing-* adıyla bir değer eklemek daha düzenlidir.

Margin ile mi, gap ile mi boşluk vermeliyim?

Kardeş elemanlar arasındaki boşluk için flex veya grid kapsayıcısında gap genellikle daha az sınıf ve daha az sürpriz demektir. Margin, tek bir elemanı komşusundan ayırmak, negatif kaydırma yapmak veya auto ile itmek gerektiğinde öne çıkar.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Tailwind öğrenme rehberi · gap, space-x ve divide · width, height ve size · arbitrary values · @theme direktifi · Tailwind CSS sıfırdan rehber