Можно ли задать margin в inline-block

«Можно ли задать margin в inline-block» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, можно. inline-block элементы сочетают особенности строчных и блочных элементов, поэтому поддерживают margin по всем сторонам (в отличие от inline, где вертикальные margin игнорируются).

.inline-block-element {
  display: inline-block;
  margin: 20px; /* Работает */
}

Нюансы:

  • Вертикальные margin могут влиять на выравнивание соседних элементов.
  • В некоторых случаях может возникать пробел между inline-block элементами из-за переносов в HTML (можно убрать через font-size: 0 у родителя).