Tailwind CSS'te kardeş elemanlar arasına boşluk koymanın üç yolu vardır: flex ve grid kapsayıcısında gap-*, herhangi bir kapsayıcıda alt elemanlara margin dağıtan space-x-* ve space-y-*, aralara çizgi çeken divide-x-* ve divide-y-*. Kısa cevap şudur: kapsayıcı flex veya grid ise gap kullanın; düz bir blok akışında dikey ritim için space-y, öğeleri ince çizgilerle ayırmak için divide uygundur.

Bu yazıda üçünün de Tailwind CSS v4.3.5 resmî standalone CLI ile derlenmiş gerçek çıktısını okuyacak, space ve divide sınıflarının hangi seçiciyle çalıştığını, ters sıralı listelerde *-reverse sınıflarının neden gerektiğini ve resmî belgelerin bu sınıflar için saydığı sınırlamaları göreceksiniz. Boşluk ölçeğinin kendisi (--spacing ve calc()) padding ve margin yazısında, serinin genel haritası Tailwind öğrenme rehberinde.

gap: flex ve grid için doğal seçim

gap: flex ve grid için doğal seçim

gap-* sınıfları CSS'in gap özelliğini yazar ve hem flex hem grid kapsayıcısında çalışır. gap-4 satırlar ve sütunlar arasına aynı boşluğu koyar; gap-x-* yalnızca column-gap, gap-y-* yalnızca row-gap üretir. Değerler margin ve padding ile aynı ölçekten gelir, bu yüzden gap-4 varsayılan temada 1rem eder. Aşağıdaki gezinme listesinde öğeler satıra sığmadığında alt satıra kayıyor; yatay ve dikey aralıklar ayrı ayrı ayarlandı:

html
<ul class="flex flex-wrap gap-x-6 gap-y-3">
  <li>Anasayfa</li>
  <li>Blog</li>
  <li>İletişim</li>
</ul>
css
@layer utilities {
  .flex {
    display: flex;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }
}

v4.3.5 ile derlenen CSS çok sade: boşluk kapsayıcının kendisine yazılıyor, alt elemanlara hiçbir kural eklenmiyor. Bunun önemli bir sonucu var. Boşluk yalnızca öğelerin arasında oluşur; ilk öğenin başında, son öğenin sonunda ya da bir satır kaydığında satırın ucunda fazladan boşluk kalmaz. Alt elemanlardan biri gizlense, yeri değişse veya sıra order-* ile karıştırılsa bile hesap tarayıcı tarafından yeniden yapılır. Flex kapsayıcısının kendisi ve satır kaydırma flexbox sınıfları yazısında, grid tarafı grid-cols ve grid-rows yazısında anlatılıyor.

Resmî gap sayfası köşeli parantezle keyfi değeri (gap-[10vw]) ve değişken kısaltmasını (gap-(--my-gap)) da gösterir. Önekle birleştirmek de mümkündür: gap-4 md:gap-6 yazdığınızda ikinci değer yalnızca @media (width >= 48rem) içinde geçerli olur.

space-x ve space-y: alt elemanlara margin

space-* sınıfları kapsayıcının değil, alt elemanların stilini değiştirir. Resmî margin sayfası bunları, bir gruptaki son öğe dışındaki herkese margin ekleyen bir kısayol olarak tanımlar. Kapsayıcının flex veya grid olması gerekmez; bu yüzden düz bir makale gövdesinde paragraflar arasına eşit dikey boşluk koymak için kullanışlıdır:

html
<div class="space-y-4">
  <p>Birinci paragraf</p>
  <p>İkinci paragraf</p>
  <p>Üçüncü paragraf</p>
</div>
css
@layer utilities {
  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

Bu çıktıyı satır satır okumaya değer. Seçici .space-y-4 > :not(:last-child) kalıbındadır: kapsayıcının doğrudan çocuklarından son çocuk olmayanların hepsi kuralı alır. Margin iki parçaya bölünmüştür ve hangisinin dolu olacağına --tw-space-y-reverse değişkeni karar verir. Değişken 0 iken başlangıç tarafı 4 * 0, yani sıfır; bitiş tarafı 4 * (1 - 0), yani tam değer olur. Sonuç olarak her paragrafın altına 1rem eklenir, son paragrafın altına eklenmez.

Seçicinin tamamı :where() içine alınmıştır. :where() içindeki seçiciler özgüllüğe katkıda bulunmadığı için bu kural, bir alt elemana doğrudan yazdığınız mb-8 gibi tek sınıflık bir kurala karşı geri planda kalır. Yani tek bir paragrafın boşluğunu özel olarak değiştirmek istediğinizde o paragrafa ayrı bir margin sınıfı vermeniz yeterlidir. Resmî yükseltme rehberi, bu sınıfların seçicisinin büyük sayfalardaki performans sorunları nedeniyle v3'tekinden farklı hâle getirildiğini belirtir; sürüm geçişinin bütün ayrıntıları Tailwind CSS v4 yenilikleri yazısında.

Ters sıralı listeler: space-x-reverse

flex-row-reverse veya flex-col-reverse ile öğeleri ters çevirdiğinizde DOM'daki son öğe ekranda ilk sıraya geçer. space-x-4 ise hâlâ DOM sırasına bakar ve boşluğu yanlış kenara koyar. Resmî sayfa bunun için space-x-reverse ve space-y-reverse sınıflarını önerir. Aşağıda ayrıca negatif bir boşlukla üst üste binen avatarlar var:

html
<div class="flex -space-x-2">
  <img class="size-8 rounded-full" src="a.jpg" alt="">
  <img class="size-8 rounded-full" src="b.jpg" alt="">
</div>
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
  <div>01</div><div>02</div><div>03</div>
</div>
css
/* (kısaltıldı) */
:where(.-space-x-2 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.space-x-4 > :not(:last-child)) {
  --tw-space-x-reverse: 0;
  margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
  margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
:where(.space-x-reverse > :not(:last-child)) {
  --tw-space-x-reverse: 1;
}

space-x-reverse tek bir şey yapar: değişkeni 1'e çevirir. Formüller aynı kaldığı için bu kez başlangıç tarafı 4 * 1 ile dolar, bitiş tarafı 4 * 0 ile sıfırlanır; boşluk ters dizilmiş öğelerin doğru tarafına geçer. -space-x-2 ise çarpanı eksiye çevirir ve her avatarın bitiş kenarına -0.5rem margin vererek bir sonrakinin üzerine bindirir. Üretilen özellikler margin-inline-start ve margin-inline-end olduğu için sağdan sola bir sayfada da yön doğru kalır.

divide: öğelerin arasına çizgi

divide-* sınıfları space-* ile aynı mantıkla çalışır, ancak margin yerine kenarlık yazar. Resmî belgede ayrı bir sayfası yoktur; border-width sayfasının "Between children" bölümünde anlatılır. Renk için divide-gray-200 gibi bir renk sınıfı, stil için divide-dashed gibi bir sınıf eklenir:

html
<ul class="divide-y divide-gray-200">
  <li class="py-3">Sipariş #100</li>
  <li class="py-3">Sipariş #101</li>
  <li class="py-3">Sipariş #102</li>
</ul>
css
@layer utilities {
  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  :where(.divide-gray-200 > :not(:last-child)) {
    border-color: var(--color-gray-200);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
}

Sayı yazılmamış divide-y 1px çizgi demektir; divide-y-2 2px, divide-y-4 4px yazar. Bu değerler boşluk ölçeğine değil piksele bağlıdır. Kenarlık stili --tw-border-style değişkeninden gelir ve bu değişkenin başlangıç değeri solid olarak tanımlanmıştır. var(--color-gray-200) değişkeni varsayılan temada oklch(92.8% 0.006 264.531) değerini taşır. Renk vermezseniz ne olur? Yükseltme rehberine göre v4'te border-* ve divide-* sınıflarının varsayılan rengi currentColor olur; yani çizgi metin rengini alır. Açık gri bir ayırıcı istiyorsanız rengi kendiniz yazmalısınız. Kenarlık genişliği, rengi ve stilinin bütün seçenekleri border ve rounded yazısında.

Burada çizgi son öğe dışındaki her öğenin altına çizilir, çünkü değişken 0 iken border-top-width sıfır, border-bottom-width 1px olur. Ters sıralı bir listede divide-y-reverse değişkeni 1 yapar ve çizgi üst kenara taşınır. Satırlara py-3 verdiğimize dikkat edin: divide yalnızca çizgiyi koyar, çizgiyle metin arasındaki boşluğu padding sizin işinizdir.

Hangisini ne zaman kullanmalı?

Hangisini ne zaman kullanmalı? Flex veya grid kapsayıcıda kardeşler arası boşluk, Satır kaydıran (flex-wrap) liste, Düz blok akışında paragraflar arası dikey ritim, Öğeler...
DurumÖnerilenNeden
Flex veya grid kapsayıcıda kardeşler arası boşlukgap, gap-x, gap-yKapsayıcıya tek kural yazar, sıra ve gizleme değişse de doğru kalır
Satır kaydıran (flex-wrap) listegapspace satır sonlarını bilemez, belgeler bu durum için gap önerir
Düz blok akışında paragraflar arası dikey ritimspace-yKapsayıcının flex olması gerekmez
Öğeler arasında ince ayırıcı çizgidivide-y veya divide-xSon öğeye çizgi koymaz, rengi ayrıca verilir
Hem çizgi hem boşlukdivide ile birlikte çocuklara paddingBelgeler space ile divide birlikte kullanılmasın der
Üst üste binen avatarlar-space-x-* veya çocuklarda negatif marginNegatif değer bindirmeyi sağlar

Resmî margin sayfası space sınıflarının sınırlarını açıkça yazar: grid düzenleri, satır kaydıran düzenler ya da çocukların DOM sırasından farklı özel bir sırayla gösterildiği karmaşık durumlar için tasarlanmamışlardır. Bu durumlarda mümkünse gap kullanmanızı, değilse her öğeye margin verip kapsayıcıya aynı değerde negatif margin eklemenizi önerir. Ayrıca space sınıflarının divide sınıflarıyla birlikte çalışacak şekilde tasarlanmadığını, bu durumda çocuklara margin veya padding vermeniz gerektiğini belirtir.

Sık yapılan hatalar

Sık yapılan hatalar: Satır kaydıran listede space-x, Gizlenen son öğe, space ile divide birlikte, Çizgi renginin gri olmasını beklemek
  • Satır kaydıran listede space-x: alt satıra kayan öğelerin sağ ucunda margin kalır ve satırlar arasında dikey boşluk hiç oluşmaz. flex-wrap varsa gap-x ve gap-y kullanın.
  • Gizlenen son öğe: seçici :not(:last-child) olduğu için son çocuk hidden ile gizlense bile DOM'da hâlâ son çocuktur; ondan önceki görünür öğe boşluğunu korur ve listenin sonunda fazladan boşluk görünür. gap bu durumdan etkilenmez.
  • space ile divide birlikte: belgeler bunu önermez. Çizgili listelerde boşluğu çocuklara py-* ile verin.
  • Çizgi renginin gri olmasını beklemek: v4'te varsayılan renk currentColor olduğundan çizgi metin renginde çıkar; divide-gray-200 gibi bir renk ekleyin.
  • Ters sırada reverse sınıfını unutmak: flex-row-reverse ile birlikte space-x-reverse veya divide-x-reverse eklemezseniz boşluk ya da çizgi yanlış kenarda kalır.

Yön değiştiren düzen ve yatay ayırıcılar

Mobilde alt alta, geniş ekranda yan yana duran bir düzen, space sınıflarıyla kurulduğunda en çok sorun çıkaran kalıptır: dikey boşluğu space-y ile verip geniş ekranda md:space-y-0 md:space-x-4 ile sıfırlamak ve yönü değiştirmek gerekir. Aynı düzeni gap ile kurduğunuzda yön değişse bile boşluk kendiliğinden doğru eksene uygulanır, çünkü gap satır ve sütun aralığını birlikte tanımlar. Aşağıdaki örnekte bunu, yanında yatay bir divide-x ayırıcıyla birlikte görüyorsunuz:

html
<div class="flex flex-col gap-4 md:flex-row md:gap-8">
  <div>Ürün</div>
  <div>Fiyat</div>
</div>
<div class="flex divide-x divide-dashed">
  <span class="px-3">Kod</span>
  <span class="px-3">Belge</span>
</div>
css
@layer utilities {
  .flex {
    display: flex;
  }
  .flex-col {
    flex-direction: column;
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  :where(.divide-x > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  :where(.divide-dashed > :not(:last-child)) {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  @media (width >= 48rem) {
    .md\:flex-row {
      flex-direction: row;
    }
    .md\:gap-8 {
      gap: calc(var(--spacing) * 8);
    }
  }
}

İlk kapsayıcıda mobilde öğeler alt alta dizilir ve arada 1rem kalır; md ve üstünde yön satıra döner ve boşluk 2rem olur. Hiçbir sınıfı sıfırlamak gerekmedi. İkinci kapsayıcıda divide-x, dikey ayırıcının mantıksal özelliklerle yazıldığını gösteriyor: border-inline-start-width ve border-inline-end-width. Değişken 0 iken çizgi her öğenin bitiş kenarına, soldan sağa bir sayfada sağına düşer. divide-dashed ise hem --tw-border-style değişkenini hem border-style özelliğini dashed yapar; böylece kesik çizgi yalnızca son öğe dışındaki çocuklarda görünür.

Bu örnek, iki aile arasındaki temel farkı da özetliyor. gap düzenin kendisine ait bir özelliktir ve kapsayıcı değiştikçe yeniden hesaplanır; space ve divide ise çocuklara tek tek kural yazan kısayollardır ve kapsayıcının yönünü, satır kaydırmayı ya da görsel sırayı bilmezler. Çizgi gerektiğinde divide hâlâ en kısa yoldur; boşluk gerektiğinde ise mümkün olan her yerde kapsayıcıyı flex veya grid yapıp gap yazmak en az sürprizi getirir.

Küçük bir karşılaştırma örneği

Bir form içinde etiket ve alanları dikey dizmek istediğinizi düşünün. İki yazım da aynı görüntüyü verir: <div class="space-y-4"> ya da <div class="flex flex-col gap-4">. Birincisi her çocuğa ayrı margin yazar, ikincisi kapsayıcıya tek bir gap yazar. Forma sonradan koşullu bir uyarı kutusu eklendiğinde, ya da alanlardan biri JavaScript ile gizlendiğinde, ikinci yazım ek bir düşünce gerektirmez. Bu yüzden birçok ekip yeni kodda gap ile başlayıp space sınıflarını yalnızca flex kullanmanın anlamsız olduğu metin bloklarına bırakır. Form alanlarının kendi stilleri için form stilleri yazısına bakabilirsiniz.

Sık Sorulan Sorular

gap ile space-x arasındaki fark nedir?

gap kapsayıcıya tek bir gap özelliği yazar ve yalnızca flex ile grid kapsayıcılarında etkilidir. space-x ise son öğe dışındaki çocuklara margin ekler ve kapsayıcının türünden bağımsız çalışır, ancak satır kaydırma ve özel sıralama gibi durumlarda yanlış sonuç verebilir.

divide çizgisi neden görünmüyor?

Önce kapsayıcının doğrudan çocukları olduğundan emin olun; kural yalnızca doğrudan çocuklara uygulanır. Tek çocuklu bir listede çizgi oluşmaz, çünkü o çocuk aynı zamanda son çocuktur. Çizgi metin renginde ve 1px olduğundan zemine yakın bir renkte kaybolabilir; açık bir renk sınıfı ekleyin.

space-y-4 ile her öğeye mb-4 yazmak aynı şey mi?

Neredeyse aynıdır, iki farkla. space-y-4 son öğeyi atlar, oysa her öğeye mb-4 yazarsanız son öğenin altında da 1rem kalır. Ayrıca space-y-4 tek bir sınıfla kapsayıcıda tanımlandığı için sonradan eklenen öğeler de kuralı kendiliğinden alır; her öğeye sınıf yazmayı hatırlamanız gerekmez. Tek bir öğede farklı boşluk istediğinizde o öğeye kendi margin sınıfını vermeniz yeterlidir, çünkü :where() içindeki kural daha zayıftır.

Grid içinde space-y kullanabilir miyim?

Derlenir, ama resmî belge space sınıflarının grid düzenleri için tasarlanmadığını söyler. Grid'de satır ve sütun aralıkları için gap-y-* ve gap-x-* kullanın.

gap değerini ekran boyutuna göre değiştirebilir miyim?

Evet. gap-4 md:gap-6 gibi bir yazımda ikinci sınıf @media (width >= 48rem) içinde üretilir ve o genişlikten itibaren 1.5rem boşluk verir.

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 · padding ve margin · flexbox sınıfları · grid-cols ve grid-rows · border ve rounded · CSS flexbox rehberi