Откуда появляется отступ между inline-block элементами

Откуда появляется отступ между inline-block элементами

Это одна из самых коварных проблем в CSS, с которой сталкиваются многие фронтенд-разработчики. Отступ появляется не из-за margin или padding, а из-за особенности обработки пробельных символов в HTML.

1. Причина проблемы

Браузер рассматривает inline-block элементы как текст. Любой пробель, табуляция или перевод строки в HTML между элементами интерпретируется как символ пробела.

<!-- В HTML-коде есть пробел/перевод строки -->
<div class="container">
  <span class="inline-block">Item 1</span>
  <span class="inline-block">Item 2</span>
  <span class="inline-block">Item 3</span>
</div>

<!-- Браузер видит это как -->
<div class="container">
  <span class="inline-block">Item 1</span> <!-- пробел здесь! -->
  <span class="inline-block">Item 2</span> <!-- пробел здесь! -->
  <span class="inline-block">Item 3</span>
</div>

<!-- Результат: между элементами появляется отступ ~4-8px -->

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

<!-- Способ 1: Элементы на одной строке -->
<div class="container">
  <span class="inline-block">Item 1</span><span class="inline-block">Item 2</span><span class="inline-block">Item 3</span>
</div>

<!-- Способ 2: Закрывающий тег рядом с открывающим -->
<div class="container">
  <span class="inline-block">Item 1</span
  ><span class="inline-block">Item 2</span
  ><span class="inline-block">Item 3</span>
</div>

<!-- Способ 3: Комментарий для скрытия пробела -->
<div class="container">
  <span class="inline-block">Item 1</span><!--
  --><span class="inline-block">Item 2</span><!--
  --><span class="inline-block">Item 3</span>
</div>

3. Решение 2: CSS свойство font-size (рекомендуется)

Установите font-size родителя в 0, что исключит пробелы, а затем восстановите размер детей.

// CSS
const styles = `
  .container {
    font-size: 0; /* Убирает пробелы между inline-block */
    display: flex; /* или остается display: block */
  }
  
  .inline-block {
    display: inline-block;
    width: 25%;
    font-size: 16px; /* Восстановить размер шрифта */
    vertical-align: top;
  }
`;

// HTML
const html = `
<div class="container">
  <div class="inline-block">Item 1</div>
  <div class="inline-block">Item 2</div>
  <div class="inline-block">Item 3</div>
  <div class="inline-block">Item 4</div>
</div>
`;

4. Решение 3: margin отрицательный

Можно скомпенсировать пробел отрицательным margin.

/* Пробел обычно равен 1em, при font-size 16px это ~4-8px */
.container {
  display: block;
}

.inline-block {
  display: inline-block;
  width: 25%;
  margin-right: -4px; /* или -1em */
  vertical-align: top;
  box-sizing: border-box;
}

5. Решение 4: Flexbox (СОВРЕМЕННЫЙ ПОДХОД)

Никогда не беспокойтесь о пробелах, используя flexbox.

// BEST PRACTICE - используй flexbox
const styles = `
  .container {
    display: flex; /* Решает проблему пробелов */
    gap: 16px; /* Явно указываем отступ */
  }
  
  .item {
    flex: 1; /* Равная ширина */
  }
`;

// HTML
const html = `
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>
`;

6. Решение 5: letter-spacing

Можно уменьшить letter-spacing родителя.

.container {
  letter-spacing: -0.25em; /* Убирает пробелы */
}

.inline-block {
  display: inline-block;
  letter-spacing: normal; /* Восстановить для детей */
  width: 25%;
  vertical-align: top;
  box-sizing: border-box;
}

7. Практический пример

// React компонент с несколькими подходами
export function GridComparison() {
  return (
    <div>
      {/* Подход 1: Flexbox (ЛУЧШИЙ) */}
      <div style={{
        display: 'flex',
        gap: '10px',
        marginBottom: '20px'
      }}>
        {[1, 2, 3, 4].map(i => (
          <div key={i} style={{
            flex: 1,
            background: '#e0e0e0',
            padding: '10px',
            textAlign: 'center'
          }}>
            Item {i}
          </div>
        ))}
      </div>
      
      {/* Подход 2: font-size 0 */}
      <div style={{
        fontSize: 0,
        marginBottom: '20px'
      }}>
        {[1, 2, 3, 4].map(i => (
          <div key={i} style={{
            display: 'inline-block',
            width: '25%',
            fontSize: '16px',
            background: '#e0e0e0',
            padding: '10px',
            boxSizing: 'border-box',
            textAlign: 'center'
          }}>
            Item {i}
          </div>
        ))}
      </div>
      
      {/* Подход 3: Элементы на одной строке (не рекомендуется) */}
      <div>
        {[1, 2, 3, 4].map((i, idx) => (
          <span key={i} style={{
            display: 'inline-block',
            width: 'calc(25% - 7.5px)',
            marginRight: idx < 3 ? '10px' : 0,
            background: '#e0e0e0',
            padding: '10px',
            textAlign: 'center'
          }}>
            Item {i}
          </span>
        ))}
      </div>
    </div>
  );
}

8. Измерение пробела

Пробел зависит от font-size и конкретного шрифта:

const whitespaceSize = {
  'font-size: 16px': '4-6px',
  'font-size: 14px': '3-4px',
  'font-size: 12px': '2-3px',
  'font-size: 20px': '5-7px',
};

// Приблизительная формула
const spaceWidth = fontSize * 0.25; // ~0.25em

9. Вертикальное выравнивание

Осторожно с vertical-align при inline-block элементах:

.container {
  font-size: 0; /* Убирает пробелы и базовую линию */
}

.inline-block {
  display: inline-block;
  width: 25%;
  font-size: 16px;
  vertical-align: top; /* Без этого будут пробелы внизу */
  box-sizing: border-box;
}

10. Контрольный список

const inlineBlockChecklist = {
  'Используй flexbox вместо inline-block': true,
  'Если inline-block нужен, установи font-size: 0': true,
  'Восстанови font-size у детей': true,
  'Используй vertical-align: top': true,
  'Используй box-sizing: border-box': true,
  'Помни про пробелы в HTML': true,
  'В современных проектах предпочитай grid или flexbox': true
};

Итог

Пробел между inline-block элементами появляется из-за пробельных символов в HTML, которые браузер интерпретирует как текст. Лучший способ - использовать Flexbox или Grid вместо inline-block. Если нужен inline-block, установи font-size: 0 на контейнер.