Пространство между divs - display table-cell

Ответ 1

Вы можете использовать свойство border-spacing:

HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBin Demo

Любая другая опция?

Ну, не совсем.

Почему?

• margin свойство не применимо к элементам display: table-cell.
• padding свойство не создает пространство между ребрами ячеек.
• float свойство разрушает ожидаемое поведение элементов table-cell, которые могут быть такими же высокими, как и их родительский элемент.

Ответ 2

Используйте прозрачные границы, если это возможно.

JSFiddle Demo

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

Описание

Вы можете использовать свойство border-spacing, но оно не только создает пространство между ячейками таблицы, но также между ячейками таблицы и контейнером таблицы.

Если вам не нужны видимые границы для ваших ячеек таблицы, вы должны использовать transparent border для создания полей полей. Прозрачные границы требуют установки background-clip: padding-box;, потому что в противном случае на границе отображается фоновый цвет ячеек таблицы.

Прозрачные границы и фоновый клип поддерживаются в IE9 вверх (и во всех других современных браузерах). Если вам нужна совместимость с IE8 или не требуется реальное прозрачное пространство, вы можете просто установить белый цвет границы и оставить background-clip вне.

Ответ 3

Создайте новый div с любым именем (я просто использую разделение таблиц) и придаю ему ширину, не добавляя к ней контент, размещая ее между необходимыми div, которые нужно разделить.

Вы можете добавить любую необходимую ширину. Я только использовал 0,6%, потому что это то, что мне нужно, когда я должен был это сделать.

.table-split {
  display: table-cell;
  width: 0.6%
}

<div class="table-split"></div>

Ответ 4

Вы можете поместить свои встроенные стили CSS в класс css. Вы можете добавить пространство между двумя div, используя стили css, такие как padding: 5px или margin: 5px.

<div class="tile">
   content
</div>
<div class="tile">
   content
</div>

.tile
{
   display: table-cell;
   padding: 5px;
}