CSS-də inline-block nədir?

inline-block — CSS-də display xüsusiyyətinin dəyəri olub, elementlərin satır içi kimi davranmasına imkan verir (yalnız lazım olan eni tutur və yeni sətirə başlamaz), eyni zamanda hər tərəfdən eni, hündürlüyü, marjin (margin, padding) təyin etməyə imkan verir, blok elementlər kimi.

Əsas xüsusiyyətlər:

• Satır içi yerləşdirmə: display: inline-block olan elementlər, kifayət qədər yer varsa, eyni sətirdə yan-yana yerləşir.
• Ölçülərin nəzərə alınması: width və height təyin oluna bilər. Standart ölçü məzmun tərəfindən müəyyən edilir, əgər təyin edilməyibsə.
• Tam marjin və sərhəd: margin, padding və border bütün tərəflərə (yuxarı, sağ, aşağı, sol) tətbiq olunur, inline elementlərdən fərqli olaraq, vertikal marjinlər və sərhədlər qonşu elementlərin yerləşməsinə təsir etmir.
• Vertikal hizalama: vertical-align xüsusiyyəti istifadə edilə bilər, sətirdəki qonşu elementlərə nisbətən hizalama üçün.

İstifadə nümunəsi:

/* Elementlər sətirdə yerləşəcək, ölçülər və marjinlər ilə */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Tətbiq sahələri:

• Üfüqi naviqasiya menyularının yaradılması.
• Eyni sətirdə kart şəklində məzmun bloklarının yerləşdirilməsi.
• Bir-birinə yaxın, lakin müəyyən ölçülərə malik elementlərin birləşdirilməsi və hizalanması.

Digər display dəyərləri ilə müqayisə:

display	Təsviri	Ölçülər nəzərə alınır (width/height)	Vertikal marjinlər nəzərə alınır (margin-top/bottom)	Sətirdə yerləşdirmə
block	Həmişə yeni sətirdə başlayır, mövcud genişliyi tutur.	Bəli	Bəli	Xeyr
inline	Mətn ilə sətirdə yerləşir, yalnız lazım olan eni tutur.	Xeyr	Xeyr (margin-left/right təsir edir)	Bəli
inline-block	Sətirdə yerləşir, lakin ölçü və marjinlər blok kimi davranır.	Bəli	Bəli	Bəli