Negatif Dış Boşluklar ve Öğeler Arası Boşluk
-mt-4 gibi negatif dış boşluklarla öğeleri birbirine yaklaştırın; alt öğeler arasına boşluk eklemek için space-x-* ve space-y-* kullanın.
Negatif Dış Boşluklar ve Öğeler Arası Boşluk, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. 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.
Negatif Kenar Boşlukları Nedir?
Negatif kenar boşlukları, bir öğeyi kapsayıcısının veya kardeş öğesinin sınırlarına ya da bu sınırların ötesine doğru çeker. CSS'de negatif üst kenar boşluğu bir öğeyi yukarı, negatif sol kenar boşluğu ise sola çeker. Bu, üst üste binme etkileri oluşturur ve öğelerin doğal belge akışının dışına çıkmasını sağlar. Tailwind, herhangi bir kenar boşluğu yardımcısının başına - ön eki ekleyerek negatif kenar boşluklarını destekler.
<!-- Pull an element upward over the previous element -->
<div class="bg-indigo-600 h-32 rounded-t-xl"></div>
<div class="bg-white rounded-xl shadow p-6 -mt-8 mx-4">
This card overlaps the colored header above
</div>Tailwind'de Negatif Kenar Boşluğu Sözdizimi
Negatif yapmak için herhangi bir kenar boşluğu yardımcısının başına kısa çizgi ekleyin: -mt-4, margin-top: -16px değeridir; -mx-4 ise margin-left: -16px; margin-right: -16px değeridir. Aynı aralık ölçeği uygulanır — -mt-1 -4px, -mt-8 ise -32px değerindedir. CSS'de dolguyu negatif yapamazsınız (dolgu her zaman negatif olmayan bir değerdir); yalnızca kenar boşlukları negatif olabilir.
<div class="bg-blue-600 h-24 rounded-xl"></div>
<div class="-mt-6 ml-6 inline-block bg-white shadow-lg rounded-lg px-6 py-4">
<span class="text-blue-700 font-semibold">Overlapping Badge</span>
</div>Kapsayıcı Dolgusunun Dışına Çıkma
Negatif kenar boşluklarının yaygın bir kullanımı, tam genişlikteki bir görseli dolgu verilmiş kapsayıcının dışına çıkarmaktır. İçerik kapsayıcısında px-6 (yatayda 24px dolgu) varsa, içindeki görsele uygulanan negatif -mx-6 bu dolguyu ortadan kaldırır. Böylece çevresindeki metin dolgulu kalırken görsel kenardan kenara uzanır. Bu teknik blog makalesi düzenlerinde yaygın olarak kullanılır.
<article class="max-w-2xl mx-auto px-6">
<h1 class="text-3xl font-bold mb-4">Article Title</h1>
<p class="mb-6">Intro paragraph within the padded container.</p>
<!-- Full-bleed image that breaks out of the padding -->
<img src="wide-photo.jpg" class="-mx-6 w-[calc(100%+3rem)] mb-6" alt="" />
<p>Content continues with normal padding.</p>
</article>Kart Öğelerini Üst Üste Bindirme
Profil kartlarında, fiyatlandırma kartlarında ve özellik kartlarında genellikle kartın üst kenarıyla üst üste binen bir avatar veya simge bulunur. Bu üst üste binmeyi oluşturmak için kart gövdesine negatif üst kenar boşluğu veya üst bilgi öğesine negatif alt kenar boşluğu uygulayın. Hangi öğenin üstte görüneceğini denetlemek için bunu Tailwind'in z-* yardımcı sınıflarıyla tanımlanmış bir z-index değeriyle birlikte kullanın.
<div class="text-center">
<img src="avatar.jpg" class="w-20 h-20 rounded-full border-4 border-white shadow mx-auto" alt="" />
<div class="-mt-10 pt-12 bg-white rounded-xl shadow p-6">
<h3 class="font-bold text-gray-900">Jane Doe</h3>
<p class="text-gray-500 text-sm">Product Designer</p>
</div>
</div>Izgara Taşması için Negatif Kenar Boşluğu
Bir ızgaranın iç olukları korurken ekranın kenarlarına kadar taşması gerektiğinde, ızgara kapsayıcısında negatif yatay kenar boşluklarını ızgara öğelerinde pozitif dolguyla birlikte kullanın. Bazen negatif kenar boşluklu ızgara olarak adlandırılan bu teknik, öğelerin kapsayıcı kenarlarıyla hizalanmasını ve aralarında tutarlı oluklar bulunmasını sağlar.
<!-- Grid that bleeds to container edges -->
<div class="-mx-4">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 px-4">
<div class="bg-gray-100 p-4 rounded">Item 1</div>
<div class="bg-gray-100 p-4 rounded">Item 2</div>
<div class="bg-gray-100 p-4 rounded">Item 3</div>
</div>
</div>space-x-* ve space-y-* Tanıtımı
space-x-* ve space-y-* yardımcı sınıfları, ilk alt öğeye kenar boşluğu eklemeden kardeş öğeler arasına kenar boşluğu ekler. Bunları bir üst kapsayıcıya uyguladığınızda Tailwind, ilk alt öğe dışındaki her doğrudan alt öğeye otomatik olarak margin-left ekler. Flex veya ızgara kullanılmadığında ya da listedeki öğeler arasına boşluk eklemek istediğinizde bu, gap-* için kullanışlı bir alternatiftir.
<!-- space-x-4 adds left margin to every child except the first -->
<div class="flex space-x-4">
<button class="px-4 py-2 bg-gray-100 rounded">Option A</button>
<button class="px-4 py-2 bg-gray-100 rounded">Option B</button>
<button class="px-4 py-2 bg-gray-100 rounded">Option C</button>
</div>Dikey Sıralama için space-y-*
space-y-*, ilk alt öğe dışındaki her doğrudan alt öğeye üst kenar boşluğu ekleyerek yığılmış bir listede tekdüze dikey boşluk oluşturur. Bu, her öğeye ayrı ayrı dolgu eklemeden tutarlı boşluk bırakmak istediğiniz gezinme menüleri, kart yığınları ve form alanı grupları için özellikle kullanışlıdır.
<nav class="space-y-1">
<a href="#" class="block px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg">
Dashboard
</a>
<a href="#" class="block px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-lg">
Profile
</a>
<a href="#" class="block px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 rounded-lg">
Settings
</a>
</nav>space-* ve gap-* Karşılaştırması
Hem space-x-* hem de gap-x-* alt öğeler arasına yatay boşluk ekler, ancak farklı şekilde çalışır. space-x-*, alt öğelerde margin-left kullanır (her görüntüleme türüyle çalışır); gap-* ise CSS gap özelliğini kullanır (yalnızca flex veya ızgara bağlamlarında çalışır). Sarma işlemini de doğru yönettiği için flex ve ızgara düzenlerinde gap-* kullanın. Öğeler flex/ızgara bağlamında değilse space-x-* kullanın.
<!-- In flex: prefer gap -->
<div class="flex gap-4">
<div>A</div><div>B</div><div>C</div>
</div>
<!-- Not in flex/grid: use space-x -->
<div class="space-x-4">
<span class="inline-block">A</span>
<span class="inline-block">B</span>
<span class="inline-block">C</span>
</div>Tersine Çevrilmiş Boşluk: space-x-reverse
flex-row-reverse kullanarak flex öğelerinin sırasını ters çevirdiğinizde, öğeler görsel olarak sağdan sola sıralandığı için space-x-* boşluğu yanlış tarafa ekler. Bunu düzeltmek için space-x-* ile birlikte space-x-reverse ekleyin — bu, ters çevrilmiş yöne uyum sağlamak üzere boşluğu margin-left yerine margin-right tarafına geçirir.
<!-- Reversed flex row with correct spacing -->
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
<button class="px-4 py-2 bg-gray-100 rounded">Cancel</button>
<button class="px-4 py-2 bg-indigo-600 text-white rounded">Confirm</button>
</div>Uygulama: Rozet yığını üst üste bindirme
Kullanıcı avatarı yığınlarında (iş birliği özelliklerinde yaygın olarak kullanılır) avatarlar negatif kenar boşlukları kullanılarak üst üste bindirilir. Sonraki her avatarın, öncekinin bir bölümünü örtecek şekilde negatif sol kenar boşluğu vardır. Her avatara kenarlık uygulayın ve üzerine gelinen avatarı yığının en üstüne getirmek için hover:z-10 kullanın. Böylece üst üste binmiş avatar yığını görünümü oluşturulur.
<div class="flex">
<img src="user1.jpg" class="w-8 h-8 rounded-full border-2 border-white" alt="" />
<img src="user2.jpg" class="w-8 h-8 rounded-full border-2 border-white -ml-2 hover:z-10" alt="" />
<img src="user3.jpg" class="w-8 h-8 rounded-full border-2 border-white -ml-2 hover:z-10" alt="" />
<div class="w-8 h-8 rounded-full border-2 border-white -ml-2 bg-gray-200 flex items-center justify-center text-xs font-medium text-gray-600">
+5
</div>
</div>Negatif kenar boşluklarından ne zaman kaçınmalı
Negatif kenar boşlukları güçlüdür; ancak ölçülü kullanılmalıdır. Öğeler beklenmedik şekilde daraldığında veya taştığında düzen hatalarına yol açabilir, kod incelemelerinde kafa karışıklığı yaratabilir ve üst öğedeki overflow-hidden ile çakışabilir. Flex/grid aralığı için gap-*, kardeş öğeler arasındaki aralık için space-*, belge akışını etkilememesi gereken yalnızca görsel üst üste binmeler için de transform -translate-y-* kullanmayı tercih edin.
<!-- Use transform for visual overlap without flow impact -->
<div class="relative">
<div class="bg-indigo-600 h-24 rounded-t-xl"></div>
<div class="bg-white rounded-b-xl shadow p-6 transform -translate-y-4">
Visually shifted up without changing layout flow
</div>
</div>Hızlı kontrol
Bu dersteki Tailwind CSS Ustalığı kavramlarını anlayıp anlamadığınızı test edin.
Ders özeti
Bu derste şunları öğrendiniz: -mt-4 gibi negatif kenar boşlukları öğeleri yukarı çeker ve üst üste binme efektleri oluşturabilir, space-x-* ve space-y-* ilk kardeş öğeyi etkilemeden kardeş öğeler arasına kenar boşluğu ekler ve space-* her görüntüleme türüyle çalışırken gap-* flex ve grid kapsayıcılarının içinde tercih edilir. Sırada, güçlü yatay ve dikey düzenler oluşturmak için Tailwind'in flexbox yardımcı sınıflarını inceleyeceğiz.
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
“Negatif Dış Boşluklar ve Öğeler Arası Boşluk” dersi ücretsiz mi?
Evet — “Negatif Dış Boşluklar ve Öğeler Arası Boşluk” 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.
“Negatif Dış Boşluklar ve Öğeler Arası Boşluk” dersinde ne öğreneceğim?
-mt-4 gibi negatif dış boşluklarla öğeleri birbirine yaklaştırın; alt öğeler arasına boşluk eklemek için space-x-* ve space-y-* kullanın. 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 4. dersidir.
“Negatif Dış Boşluklar ve Öğeler Arası Boşluk” 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