CSSda inline-block nima?

inline-block — CSS'da display xususiyatining qiymati bo‘lib, elementlarga satr ichida bo‘lish imkonini beradi (faqat zarur bo‘lgan kenglikni egallaydi va yangi satrga o‘tmaydi), lekin shuningdek, kenglik, balandlik, marjin (margin, padding) har tomondan belgilash imkonini beradi, xuddi blok elementlar kabi.

Asosiy xususiyatlar:

• Satr ichida joylashish: display: inline-block bo‘lgan elementlar, agar joy bo‘lsa, bir satrda yonma-yon joylashadi.
• O‘lchamlarni hisobga olish: width va height belgilash mumkin. O‘lcham, agar belgilangan bo‘lmasa, mazmuni tomonidan aniqlanadi.
• To‘liq marjinlar va ramkalar: margin, padding va border har tomondan (yuqori, o‘ng, past, chap) qo‘llanadi, inline elementlardan farqli o‘laroq, vertikal marjinlar va ramkalar yonma-yon joylashgan elementlarning joylashuviga ta’sir qilmaydi.
• Vertikal tekislik: vertical-align xususiyatidan foydalanib, satr ichidagi elementlarga nisbatan tekislikni sozlash mumkin.

Misol:

/* Elementlar satrda joylashadi, o‘lchamlar va marjinlar bilan */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Qo‘llanilishi:

• Gorizontal navigatsiya menyularini yaratish.
• Bir satrda kartalar shaklidagi kontent bloklarini joylashtirish.
• Birga joylashgan, lekin o‘lchamlari belgilangan elementlarni birlashtirish va tekislashtirish.

Boshqa display qiymatlari bilan taqqoslaganda:

display	Tavsifi	O‘lchamlar (width/height) hisobga olinadimi	Vertikal marjinlar (margin-top/bottom) hisobga olinadimi	Satr ichida joylashuv
block	Har doim yangi satrda boshlanadi, mavjud bo‘shliqni to‘liq egallaydi.	Ha	Ha	Yo‘q
inline	Matn bilan satr ichida joylashadi, faqat kerakli kenglikni egallaydi.	Yo‘q	Yo‘q (margin-left/right ta’sir qiladi)	Ha
inline-block	Satr ichida joylashadi, lekin o‘lcham va marjinlar blok kabi bo‘ladi.	Ha	Ha	Ha