Какво е inline-block в CSS?

inline-block — е стойност на свойството display в CSS, която позволява на елементите да се държат като inline елементи (зает само необходимата ширина и не започват на нов ред), но в същото време да имат възможност да задават ширина, височина, маржове (margin, padding) от всяка страна, както блоковите елементи.

Основни характеристики:

• Позициониране в ред: Елементите с display: inline-block се поставят един след друг в една линия, ако има достатъчно място.
• Отчитане на размерите: Могат да се задават width и height. Стойността по подразбиране се определя от съдържанието, ако не е зададена.
• Пълни маржове и рамки: margin, padding и border се прилагат от всички страни (горе, дясно, долу, ляво), за разлика от inline елементите (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	Разположен в ред, но се държи като блок по размери и маржове.	Да	Да	Да