Šta je inline-block u CSS-u?

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)	Учетак вертикалних размакa (margin-top/bottom)	Распоред у линији
block	Увек почиње у новом реду, заузима целу доступну ширину.	Да	Да	Не
inline	Распоређује се у реду са текстом, заузима само потребну ширину.	Не	Не (утичу margin-left/right)	Да
inline-block	Распоређује се у реду, али се понаша као блок по величинама и размакима.	Да	Да	Да