Создание пробела между div с display:table-cell в CSS

Быстрый ответ

Для отображения промежутков между блоками, аналогичных пробелам между ячейками таблицы, используйте свойство border-spacing применительно к контейнеру с display: table;:

<div style="display: table; border-spacing: 10px;">
  <div style="display: table-cell; background-color: red;">Ячейка 1</div>
  <div style="display: table-cell; background-color: green;">Ячейка 2</div>
</div>

Выберите подходящее значение для свойства border-spacing, чтобы настроить ширину промежутков. Важно иметь в виду: border-collapse может повлиять на border-spacing, отменяя его эффект.

Разбираемся дальше: альтернативные методы создания пробелов

Используем внутренние отступы и background-clip

Непосредственное добавление промежутков к элементам с table-cell не приведет к появлению пробелов между блоками. При применении background-clip: padding-box; можно визуализировать эффект разделения:

.table-cell {
  display: table-cell;
  padding: 10px;
  background-clip: padding-box;
}

Такой подход позволяет ограничивать фон и границы внутренними отступами, избегая наложения на соседние ячейки.

Подробнее об этом расскажет наш спикер на видео

Используем элементы-разделители

Между блоками можно вставить дополнительный div с display: table-cell; – он станет незаметным разделителем:

<div style="display: table;">
  <div style="display: table-cell;">Ячейка 1</div>
  <div style="display: table-cell; width: 20px;"></div> <!-- Я – незаметный разделитель между блоками -->
  <div style="display: table-cell;">Ячейка 2</div>
</div>

Применяем подходы будущего: flexbox

Flexbox — это актуальный стандарт раскладки, который идеально подходит для организации пространства между элементами. Припишите контейнеру display: flex; и установите justify-content: space-between;, чтобы равномерно распределить блоки:

.flex-container {
  display: flex;
  justify-content: space-between; 
}

Flexbox — это удобный инструмент, которым должен владеть каждый современный веб-разработчик.

Осваиваем классические методы: совместимость с IE8

Для обеспечения совместимости кода с IE8, замените прозрачные границы на границы', цвета фона или белые — этот браузер не поддерживает background-clip:

.table-cell {
  display: table-cell;
  border: 5px solid white;
}

Визуализация

Представьте, что каждый div — это автомобиль, а пробел между блоками — свободное место для парковки:

Места: | 🚗 |    | 🚗 |    | 🚗 |

display: table-cell при этом действует как границы мест для парковки:

| 🚗 – Разделитель – 🚗 – Разделитель – 🚗 |
^ граница ячейки

В этом контексте свойства table-cell выступают в роли разметки на асфальте, обеспечивающей необходимые пробелы между автомобилями:

| 🚗 | <-> | 🚗 | <-> | 🚗 |

Используем display: table-cell правильно: знание ограничений

Применение display: table-cell; имеет определенные особенности и ограничения:

• Отступы (margins) между ячейками-блоками не работают.
• Обтекание (float) может нарушить структуру ячеек.
• Важно учесть влияние фона и границ на общий размер пробела между блоками.

Полезные материалы

1. display – CSS: Каскадные таблицы стилей | MDN — детальное описание свойства display, включая table-cell.
2. CSS Стилизация таблиц — ознакомление со стилизацией таблиц с помощью CSS.
3. Топ-10 дизайнов таблиц CSS — Smashing Magazine — идеи по креативной стилизации таблиц.
4. html – Как и зачем использовать display: table-cell (CSS) – Stack Overflow — обсуждение вопросов, связанных с display: table-cell.
5. "table-cell" | Can I use... Support tables for HTML5, CSS3, etc — проверка поддержки свойства table-cell браузерами.