CSS'de inline-block nedir?

inline-block — CSS'te display özelliğinin bir değeri olup, öğelerin satır içi gibi davranmasını sağlar (sadece gereken genişliği kaplar ve yeni satıra başlamaz), ancak aynı zamanda genişlik, yükseklik, marjin (margin, padding) her taraftan ayarlanabilir, tıpkı blok öğeler gibi.

Ana özellikler:

• Satır içi konumlandırma: display: inline-block olan öğeler, yeterli alan varsa, aynı satırda yan yana dizilir.
• Boyutların dikkate alınması: width ve height ayarlanabilir. Varsayılan boyut, ayarlanmamışsa içerik tarafından belirlenir.
• Tam marjinler ve kenarlıklar: margin, padding ve border tüm taraflara (üst, sağ, alt, sol) uygulanır, inline öğelerde (inline) dikey marjinler ve kenarlıklar, yan yana gelen öğelerin konumunu etkilemez.
• Dikey hizalama: vertical-align özelliği, satır içindeki diğer öğelere göre hizalamak için kullanılabilir.

Kullanım örneği:

/* Öğeler satırda dizilecek, belirli boyutlar ve marjinler ile */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Uygulama alanları:

• Yatay navigasyon menülerinin oluşturulması.
• Kartlar şeklinde içerik bloklarının aynı satırda dizilmesi.
• Birbirine yakın ama belirli boyutlara sahip öğelerin kombinasyonu ve hizalanması.

Diğer display değerleri ile karşılaştırma:

display	Açıklama	Boyutlar dikkate alınır (width/height)	Dikey marjinler dikkate alınır (margin-top/bottom)	Satırda dizilim
block	Her zaman yeni satıra başlar, kullanılabilir tüm genişliği kaplar.	Evet	Evet	Hayır
inline	Metin ile satır içi dizilir, sadece gereken genişliği kaplar.	Hayır	Hayır (margin-left/right etkiler)	Evet
inline-block	Satır içi dizilir, ancak boyut ve marjinler blok gibi davranır.	Evet	Evet	Evet