Проблема с margin при display: table-cell в CSS

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

Для элемента с display: table-cell; свойство margin не характерно, так как он повторяет поведение HTML-элемента <td>, предпочитающего padding. Чтобы задать внешние отступы, поместите данный элемент внутрь <div> и примените margin к этому контейнеру.

<div style="margin: 10px;">
  <div style="display: table-cell; padding: 10px;">
    Ячейка, обладающая внутренними отступами.
  </div>
</div>

Для задания margin, используйте обёртку вокруг ячейки. Внутренние отступы для ячейки назначаются через padding. Свойство table-cell передает ячейке неспособность к прямому использованию внешних отступов.

Почему "display: table-cell" ведет себя таким образом?

Использование родительского элемента для определения отступов

После применения свойства display: table-cell; элемент div обретает свойства ячейки таблицы, аналогичной HTML <td>. Ограничение на margin объясняется этой особенностью. Для задания пространства между элементами с примененным display: table-cell; используется свойство border-spacing родительского элемента с display: table;.

.table {
  display: table;
  border-spacing: 10px; /* ответственно за расстояния между div'ами, преобразованными в ячейки */
}

Организуйте структуру следующим образом:

<div class="table">
  <div class="cell">
    Пусть вашим "table-cell" тоже дышится!
  </div>
</div>

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

Создание пространства внутри ячейки

Для элемента с display: table-cell; источником создания пространства служит padding.

.cell {
  display: table-cell;
  padding: 10px; /* создаёт обособленное пространство внутри ячейки таблицы */
  border: 1px solid black; /* наглядно показывает границы */
}

Использование прозрачных границ для создания зазора

Альтернативный подход — прозрачные границы у table-cell. Но следует учесть, что размер границы невозможно задать в процентах.

.cell {
  display: table-cell; 
  border: 10px solid transparent; /* прозрачные границы – элегантное решение! */
}

Разница в пространстве по горизонтали и вертикали

Если требуются отличающиеся интервалы по горизонтали и вертикали, border-spacing может принять два разлиных значения:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 5px 10px; /* горизонтальное и вертикальное разделение – искусство использования всего спектра возможностей! */
}

Имитация отступов в table-cell

Мечтаете о эффекте, аналогичном margin? Добавьте внутрь внутренний <div> или <span> с определённой шириной и имитируйте внешний отступ:

<div class="cell">
  <span style="width:10px;">Мы не имитируем margins... Это всего лишь оптическая игра!</span>
<div>

Расположение нескольких ячеек в одном ряду

Чтобы выстроить несколько ячеек в единую линию, задайте .row {display: table-row;}:

<div class="table">
  <div class="row">
    <div class="cell">Ячейка 1: Здесь начинается наше путешествие!</div>
    <div class="cell">Ячейка 2: И мы продолжаем здесь! Получается восхитительно!</div>
  </div>
</div>

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

Рассмотрим на контретном примере, как margin взаимодействует с div, стилизованным под table-cell:

Вообразите сервировку стола:

|🍽️ Тарелка (Содержимое) |🚫 Пустота (Margin)         |
| ------------------------ | ------------------------- |
| 🍛 Карри (Вложенный div) | ➡️ (Не подействует)          |

Div cо стилем table-cell;, подобно карри в тарелке:

| 🍽️ Тарелка  |
| ------------ |
| 🍛 Карри     |

Отступы (margins) не создадут пространство вокруг карри, потому что карри, как и ячейки в table-cell, предназначены для тесного размещения. Они совместно формируют один неразрывный элемент и функцию, как элементы с display: table-cell.

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

1. display – CSS: Cascading Style Sheets | MDN — Незаменимый источник для глубокого изучения свойств display: table-cell.
2. display | CSS-Tricks – CSS-Tricks — Подробная статья, предоставляющая четкое понимание различных вариантов display: table-cell.
3. html – How (and why) to use display: table-cell (CSS) – Stack Overflow — Захватывающее обсуждение, фокусирующее внимание на практическом использовании и спецификах применения.
4. CSS Styling Tables — Понятное руководство по стилизации таблиц CSS.
5. Introduction to the CSS basic box model – CSS: Cascading Style Sheets | MDN — Подробное введение в модель бокса CSS от MDN, обясняющее, почему margin не работает с table-cell.
6. Tables — Спецификации W3C, предлагающие детальное представление модели таблиц в CSS.
7. CSS display — Пошаговое руководство с примерами, предоставляющее рекомендации по использованию свойства display в CSS.