пробел между div - отображение таблицы-ячейки

У меня есть два div:

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

Есть ли способ освободить место между этими двумя div (имеющими display:table-cell)?

Вы можете использовать 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

Любой другой вариант?

Ну не совсем так.

Зачем?

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

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

Демо JSFiddle

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границы для создания полей ячеек. Прозрачные границы требуют настройки, background-clip: padding-box;иначе цвет фона ячеек таблицы будет отображаться на границе.

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

<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>

Что ж, все вышеперечисленное работает, вот мое решение, которое требует немного меньше разметки и является более гибким.

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}

<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>

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

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

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

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