inline-block дар CSS чист?

inline-block — ин арзиши хусусияти display дар CSS, ки имкон медиҳад, ки элементҳо ҳамчун элементҳои хаттӣ рафтор кунанд (фақат паҳнои заруриро гиранд ва дар навбати нав оғоз накунанд), аммо дар ҳамин ҳол имконият доранд, ки паҳноӣ, баландӣ, фосилаҳо (margin, padding) аз ҳар тарафро муайян кунанд, ҳамчун элементҳои блокӣ.

Хусусиятҳои асосӣ:

• Ҷойгиршавӣ "дар сатр": Элементҳо бо display: inline-block дар як сатр ҷойгир мешаванд, агар ҷой бошад.
• Ҳисоб кардани андозаҳо: Мумкин аст, ки width ва height муайян карда шаванд. Мазмуни асосӣ андозаи пешфарзиро муайян мекунад, агар онҳо муайян нашаванд.
• Фосилаҳо ва донаҳои пурра: Маъқул аст margin, padding ва border аз ҳама тарафҳо (top, right, bottom, left), баръакс ба элементҳои хаттӣ (inline), ки фосилаҳои вертикалӣ ва донаҳо ба ҷойгиршавии элементҳои ҳамсоя таъсир намерасонанд.
• Танзими росткунҷа дар рост: Мумкин аст, ки хусусияти vertical-align барои танзим кардани ҷойгиршавӣ нисбати элементҳои ҳамсоя дар сатр истифода шавад.

Маслиҳат барои истифода:

/* Элементҳо дар сатр ҷойгир мешаванд, андозаҳо ва фосилаҳо муайян шудаанд */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Минтақаи истифода:

• Тартиб додани менюҳои ҳавасмандии горизонталӣ.
• Ҷойгиркунии блокҳои мазмун дар шакли картинҳо дар як сатр.
• Комбинирование ва танзим кардани элементҳое, ки бояд дар якҷоягӣ бошанд, аммо андозаҳои муайян дошта бошанд.

Мувофиқсозӣ бо дигар арзишҳои display:

display	Тавсиф	Ҳисоб кардани андозаҳо (width/height)	Ҳисоб кардани фосилаҳои вертикалӣ (margin-top/bottom)	Ҷойгиршавӣ дар сатр
block	Ҳамеша дар навбати нав оғоз мекунад, тамоми паҳнои дастрасро мегирад.	Бале	Бале	Не
inline	Дар сатр бо матн ҷойгир мешавад, танҳо паҳнои заруриро мегирад.	Не	Не (мувофиқ мекунанд margin-left/right)	Бале
inline-block	Дар сатр ҷойгир мешавад, аммо ҳамчун блок бо андозаҳо ва фосилаҳо рафтор мекунад.	Бале	Бале	Бале