Есть ли автоматическое расстояние между элементами Inline-Block?

Есть ли автоматическое расстояние между элементами Inline-Block?

Да, между inline-block элементами появляется автоматическое расстояние. Это происходит потому, что браузер рассматривает пробелы и переносы строк в HTML как символы и применяет к ним свойства шрифта, создавая зазоры.

Почему появляется зазор

<style>
  .box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>

<!-- Есть пробелы в HTML -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<!-- Браузер видит это как -->
<!-- <div></div> [ПРОБЕЛ] <div></div> [ПРОБЕЛ] <div></div> -->
<!-- Пробелы занимают место (примерно 4-8px в зависимости от font-size) -->

Браузер интерпретирует пробелы и переносы строк как текстовые символы, которые имеют ширину в зависимости от font-size родителя.

Решение 1: Убрать пробелы в HTML

Элементы на одной строке:

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

Или использовать комментарии:

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

Или закрывающий тег в конце строки:

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

Все эти способы убирают пробелы, но код становится менее читаемым.

Решение 2: Установить font-size в 0 родителю

.container {
  font-size: 0; /* Убираем размер шрифта, чтобы пробелы не занимали место */
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
  font-size: 16px; /* Восстанавливаем размер для текста внутри */
}

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

Это классический приём, но требует восстановления font-size для дочерних элементов.

Решение 3: Использовать отрицательный margin

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: blue;
  margin-right: -4px; /* Компенсируем зазор */
}

Но это хрупкое решение, зависит от font-size и браузера.

Решение 4: Использовать float (устаревшее)

.box {
  float: left;
  width: 100px;
  height: 100px;
  background: blue;
}

Float элементы не создают пробелов, но это устаревший подход.

Решение 5: Flexbox (современное и лучшее)

.container {
  display: flex;
  gap: 0; /* Точное управление расстоянием */
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
}

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

Flexbox решает проблему пробелов и даёт полный контроль через gap.

Решение 6: CSS Grid (также современное)

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  gap: 0;
}

.box {
  width: 100px;
  height: 100px;
  background: blue;
}

Grid работает аналогично Flexbox и убирает пробелы.

Демонстрация проблемы

<style>
  .inline-block {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: red;
  }

  .flex {
    display: flex;
  }

  .flex-box {
    width: 50px;
    height: 50px;
    background: green;
  }
</style>

<!-- Есть зазоры между блоками -->
<div>
  <span class="inline-block"></span>
  <span class="inline-block"></span>
  <span class="inline-block"></span>
</div>

<!-- Нет зазоров -->
<div class="flex">
  <span class="flex-box"></span>
  <span class="flex-box"></span>
  <span class="flex-box"></span>
</div>

Практический пример: меню навигации

Проблема с inline-block:

<style>
  nav {
    font-size: 0; /* Убираем пробелы */
  }

  nav a {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px; /* Восстанавливаем */
    text-decoration: none;
  }
</style>

<nav>
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Контакты</a>
</nav>

Современное решение с Flexbox:

<style>
  nav {
    display: flex;
  }

  nav a {
    padding: 10px 15px;
    text-decoration: none;
  }
</style>

<nav>
  <a href="#">Главная</a>
  <a href="#">О нас</a>
  <a href="#">Контакты</a>
</nav>

Flexbox решение более читаемо и не требует хаков.

Сравнение методов

Ключевые выводы

• inline-block создаёт зазоры — это пробелы в HTML, которые браузер считает символами
• Flexbox и Grid решают это элегантно — используй их вместо inline-block
• font-size: 0 — старый трюк — всё ещё работает, но устарел
• Современный стандарт — Flexbox — гибкий, читаемый, мощный
• Избегай inline-block — используй Flexbox для раскладки

Inline-block — это наследие прошлого, в современной вёрстке используй Flexbox или Grid.