пробіл між 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 з будь-якою назвою (я просто використаю таблицю split) і надайте йому ширину, не додаючи до нього вмісту, одночасно розміщуючи його між необхідними div, які потрібно розділити.

Ви можете додати будь-яку потрібну вам ширину. Я просто використав 0,6%, тому що це те, що мені потрібно, коли мені це потрібно було зробити.

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

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