Yükleniyor...

CSS Inline-block Düzeni

Önceki ders günlük display değerlerini haritaladı. Burada melez’i çalışıyorsunuz: inline-block. Yer varken komşular bir satırda kalsın — metin gibi — ama yine de width, height ve padding’e saygı duyan gerçek bir kutu isteyin. İş budur.

Yan yana karşılaştırma

📊 Inline vs inline-block vs block

Mod	Satır davranışı	Width / height / padding
`inline`	Metin satırında oturur	Width/height çoğu zaman yok sayılır; padding tuhaf görünebilir
`inline-block`	Yer kalırsa satırda kalır	Width, height ve padding kutu gibi çalışır
`block`	Kendi satırında başlar	Tam kutu modeli; çoğu zaman satır genişliğini doldurur

Öğe kardeşleriyle bir satırı paylaşmalı ve yine de ölçülebilir boyut istiyorsa — çipler, etiketler, simge etiketleri, kompakt araç çubuğu düğmeleri — inline-block seçin. Tam sayfa sütunları ve karmaşık hizalamayı Flexbox ve Grid’e bırakın.

Hâlâ satırı paylaşan boyutlu çip

Saf inline’dan farklı olarak bir çip padding ve sabit genişlik tutup diğer çiplerin yanında oturabilir.

Boyutlu çip

css

.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

Basit bir araç çubuğu satırı

Eşit genişlikte birkaç denetim bir satırda oturabilir. Margin ile ayırın. Flexbox gelene kadar sakin bir çubuk için yeter.

Inline-block araç çubuğu

css

.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

Satır içinde dikey hizalama

Satır düzeyindeki kutular metin veya görsellerin yanında farklı yüksekliklerde oturabilir. vertical-align onları kaydırır — simge+etiket çiftleri için middle sakin bir seçimdir.

Metinle hizala

css

.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

Boşluk (whitespace) boşluğu tuzağı

Tarayıcılar etiketler arasındaki boşlukları ve satır sonlarını metin düğümü sayar. İki inline-block kardeş arasında o küçük boşluk görünür bir aralığa dönüşür. Bu Flexbox gap değildir — kalan HTML whitespace’idir.

Boşluğu görün

css

/* HTML gibi:
<span class="tile">A</span>
<span class="tile">B</span>
satır sonundan boşluk bırakır. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

Boşluğu yumuşatmak için: etiketleri boşluksuz tek satıra koyun, satır sonunu yorumlayın veya dikkatli küçük negatif margin kullanın. Sonra Flexbox daha temiz aralık verir — her satırı sonsuza dek inline-block ile zorlamayın.

Sakin bir inline-block alışkanlığı

Satır öğeleri için ortak sınıf kullanın. Boyutu bilerek verin. Boşluk yalnızca rahatsız edince düzeltin. İç içe inline-block ile tüm sayfa düzeni kurmayın — float dönemi acısı geri gelir. Position ve float’ın kendi dersleri var.

Ortak öğe sınıfı

css

.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

Kendiniz deneyin

Üç .chip yapın — inline-block, sabit genişlik, padding — satırı paylaştıklarını görün.
Eşit genişlikli dört düğmeli .tool çubuğu ve margin-right yapın.
Küçük bir .icon’u .label yanına koyup vertical-align: middle deneyin.
İki .tile kardeşi ayrı HTML satırlarında, sonra tek satırda koyun — boşluğu karşılaştırın.
Bir cümle yazın: ne zaman inline-block yeter, ne zaman Flexbox’ı beklersiniz?

Yaygın hatalar

Saf inline’ın width / height’i gerçek kutu gibi dinlemesini beklemek
Aslında etiketler arası HTML whitespace olan «gizemli boşluğu» CSS’e yıkmak
Tüm çok sütunlu sayfa düzenini inline-block ile icat etmek
Bu dersi önceki geniş display turu (block / none) gibi görmek
Melezi öğrenmeden burada position veya float tariflerine atlamak

Özet

inline-block metin gibi satırda oturur ama boyut ve padding için gerçek kutu modeli tutar
Çipler, kompakt araç çubukları ve simge+etiket çiftleri için idealdir
vertical-align farklı yükseklikteki komşuları hizalamaya yardım eder
Etiketler arası whitespace görünür boşluk yaratabilir — nedeni bilin
Karmaşık satırlar ve temiz boşluklar için Flexbox sonra gelir; inline-block’u bilerek tutun

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil