Что такое inline-block?

Что такое inline-block?

inline-block — это значение CSS свойства display, которое объединяет поведение inline и block элементов. Элемент с display: inline-block размещается в одной строке с другим контентом (как inline), но при этом позволяет устанавливать ширину, высоту, паддинг и марджин как блочный элемент.

Разница между inline, block и inline-block

1. display: block

.box {
  display: block;
  width: 100px;
  height: 100px;
  margin: 10px;  /* Работает со всех сторон */
}

Блочные элементы:

• Занимают всю доступную ширину (100%)
• Переносятся на новую строку
• Уважают width, height, margin, padding со всех сторон
• Примеры: <div>, <p>, <h1>, <section>

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<!-- Каждый на своей строке -->

2. display: inline

.link {
  display: inline;
  width: 100px;  /* НЕ работает */
  height: 100px;  /* НЕ работает */
  margin: 10px;  /* Работает только левое и правое */
}

Inline элементы:

• Занимают только нужную им ширину
• Размещаются в одной строке
• НЕ уважают width и height
• margin работает только слева и справа (top/bottom игнорируются)
• Примеры: <span>, <a>, <strong>, <em>

<span class="link">Ссылка 1</span>
<span class="link">Ссылка 2</span>
<!-- Обе в одной строке -->

3. display: inline-block

.box {
  display: inline-block;
  width: 100px;  /* РАБОТАЕТ */
  height: 100px;  /* РАБОТАЕТ */
  margin: 10px;  /* РАБОТАЕТ со всех сторон */
}

inline-block элементы:

• Размещаются в одной строке (как inline)
• Уважают width и height (как block)
• Уважают margin и padding со всех сторон
• Примеры: <button>, <img> (по умолчанию)

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<!-- Все три в одной строке (если хватает места) -->

Практический пример: навигация с inline-block

.nav-list {
  list-style: none;
  padding: 0;
}

.nav-item {
  display: inline-block;
  margin-right: 20px;
  padding: 10px 15px;
  background: lightblue;
  border-radius: 4px;
}

.nav-item:hover {
  background: darkblue;
  color: white;
}

<ul class="nav-list">
  <li class="nav-item"><a href="/">Главная</a></li>
  <li class="nav-item"><a href="/about">О нас</a></li>
  <li class="nav-item"><a href="/contact">Контакты</a></li>
</ul>

Результат: кнопки навигации будут в одной строке с паддингом, марджином и фоном.

Важная особенность: пробел между элементами

WARNING: inline-block имеет одну особенность — пробелы в HTML коде становятся реальными пробелами в макете:

<!-- Есть пробел между div'ами в коде -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>

<!-- Этот пробел отобразится как 4-8px между ними на странице! -->

Решения:

1. Убрать пробел в HTML

<div class="box">Box 1</div><div class="box">Box 2</div>

2. Отрицательный margin

.box {
  display: inline-block;
  margin-right: -4px;  /* Компенсирует пробел -->
}

3. Установить font-size родителю в 0

.container {
  font-size: 0;  /* Удаляет пробелы */
}

.box {
  display: inline-block;
  font-size: 16px;  /* Вернуть нормальный размер */
}

4. Использовать comment (комментарии)

<div class="box">Box 1</div><!--
--><div class="box">Box 2</div>

Когда inline-block был популярен?

В старые времена (до Flexbox и Grid) inline-block использовался для создания сеток и горизонтальных макетов. Сейчас есть лучшие способы.

Современные альтернативы

Flexbox (СОВРЕМЕННЫЙ способ):

.container {
  display: flex;
  gap: 20px;  /* Расстояние между элементами */
}

.box {
  flex: 1;  /* Равномерное распределение */
}

Это лучше, потому что:

• Нет проблем с пробелами
• Лучший контроль выравнивания
• Адаптивность
• Легче работать с gap

Grid (для сеток):

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 равные колонки */
  gap: 20px;
}

Пример: кнопки в ряд

❌ Старый способ с inline-block:

.buttons {
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  margin: 0 5px;
  background: blue;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

✅ Современный способ с Flexbox:

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn {
  padding: 10px 20px;
  background: blue;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Flexbox версия чище и понятнее.

Когда ещё используется inline-block?

✅ Легитимные случаи:

• Элемент должен быть строчным, но нуждается в размерах (редко, когда можно использовать что-то другое)
• Старые браузеры (IE8 и ниже)
• Работа с img (по умолчанию inline)

Пример с img:

img {
  display: inline-block;
  vertical-align: middle;  /* Выровнять с текстом */
  margin: 0 5px;
}

Итоговое сравнение

Вывод

inline-block был полезен раньше, но сейчас Flexbox и Grid лучше для макетов. Используй inline-block только если:

1. Работаешь с legacy кодом
2. Нужен простой случай типа иконка + текст
3. Нет доступа к Flexbox/Grid (очень редко)

В 90% случаев выбирай Flexbox или Grid вместо inline-block.