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

Можно ли задать margin для inline-block элемента?

Да, можно и нужно. Элемент с display: inline-block является гибридом: он ведет себя как строчный элемент (inline) в потоке документа (не создает разрыва строки до и после себя, располагается в строке с другими inline/inline-block элементами), но при этом как блочный элемент (block) в отношении применения стилей модели оформления (Box Model). Это означает, что к нему полностью применимы свойства margin, padding, width и height, в отличие от чисто строчных элементов (например, <span> по умолчанию), где вертикальные margin/padding работают иначе или не влияют на окружающие элементы.

Как работает margin у inline-block

• Все четыре стороны (margin-top, margin-right, margin-bottom, margin-left) работают и отрисовываются.
• Вертикальные margin/padding (margin-top, margin-bottom) влияют на его собственные размеры и позицию, отталкивая окружающий контент (текст, другие inline/inline-block элементы) по вертикали.
• Критическое отличие от блочного элемента: Вертикальные margin НЕ создают "схлопывания" (margin collapse) с margin соседних элементов в том же смысле, как это происходит между блочными элементами. Схлопывание margin возможно, но по другим, более специфичным сценариям.

Примеры и важные нюансы

1. Базовое применение margin

Здесь inline-block элементы получают отступы со всех сторон.

.button {
  display: inline-block;
  margin: 15px; /* Работает со всех сторон */
  padding: 10px 20px;
  background: lightblue;
}

<span class="button">Кнопка 1</span>
<span class="button">Кнопка 2</span>
Текст рядом с кнопками.

Вертикальные margin: 15px оттолкнут текст сверху и снизу от строки с кнопками.

2. Вертикальное выравнивание и "призрачные отступы"

Самый частый нюанс при работе с inline-block — это влияние вертикального выравнивания (vertical-align) на положение элемента в строке и его взаимосвязь с margin.

По умолчанию vertical-align имеет значение baseline. Если у inline-block элемента есть margin-bottom, а у соседнего текста или элемента другой vertical-align, могут возникать неочевидные отступы.

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-bottom: 20px; /* Будет работать */
  background: coral;
  vertical-align: top; /* Рекомендуется явно задать для контроля */
}

<div class="box"></div>
<div class="box"></div>

Совет: Всегда явно задавайте vertical-align (чаще всего top, middle или bottom) для inline-block элементов, чтобы избежать неожиданного поведения по вертикали.

3. Пробел в HTML как "отступ"

Поскольку inline-block элементы являются частью строки, пробелы и переносы строк в HTML-коде между ними превращаются в один пробел в отображении, как между словами. Это может создать визуальный "отступ" (обычно 4-5px), который можно принять за margin.

<!-- Пробелы между элементами создадут отступ -->
<ul>
  <li style="display: inline-block;">Пункт 1</li>
  <li style="display: inline-block;">Пункт 2</li>
  <li style="display: inline-block;">Пункт 3</li>
</ul>

Способы борьбы с пробелом:

• Убрать пробелы в HTML (нечитабельно): <li>Пункт 1</li><li>Пункт 2</li>
• Комментировать пробелы: <li>Пункт 1</li><!-- --><li>Пункт 2</li>
• Задать родителю font-size: 0 и восстановить размер шрифта у дочерних элементов.
• Использовать отрицательный margin-right (например, -4px), но это хак, зависящий от шрифта.
• Использовать flexbox или grid для контейнера вместо борьбы с inline-block.

Сравнение с другими типами отображения

Вывод

Для элементов display: inline-block задавать margin не только можно, но и это стандартная практика для создания отступов между кнопками, пунктами горизонтального меню, иконками и другими компонентами, выстроенными в строку. Ключевые моменты для успешного использования:

1. Помните о пробелах в HTML-коде как источнике нежелательных отступов.
2. Всегда контролируйте свойство vertical-align, чтобы управлять вертикальным положением элемента в строке.
3. Используйте margin для inline-block так же свободно, как и для блочных элементов, но учитывайте, что схлопывание margin работает иначе.

В современных верстках для создания строковых layout часто используют Flexbox (display: flex) или CSS Grid (display: grid), которые предоставляют более предсказуемый и мощный контроль над расположением и отступами между элементами, избавляя от многих "костылей", характерных для эпохи inline-block.