Почему div с "display: table-cell"; не зависит от маржи?

У меня есть div элементы рядом друг с другом с display: table-cell;.

Я хочу установить margin между ними, но margin: 5px не действует. Почему?

Мой код:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

Ответ 1

Причина

От документация MDN:

[Свойство margin] применяется ко всем элементам, кроме элементов с типы отображения таблицы, отличные от заголовка таблицы, таблицы и встроенной таблицы

Другими словами, свойство margin не применимо к элементам display:table-cell.

Решение

Вместо этого используйте border-spacing.

Обратите внимание, что он должен применяться к родительскому элементу с макетом display:table и border-collapse:separate.

Например:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

См. jsFiddle demo

Разный край по горизонтали и вертикали

Как уже упоминалось Диего Киросом, свойство border-spacing также принимает два значения для установки другого поля для горизонтальной и вертикальной осей.

Например

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

Ответ 2

Вы можете использовать внутренние divs для установки поля.

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

Ответ 3

Если у вас есть друг рядом друг с другом,

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

Это должно сработать!

Ответ 4

Если у вас нет границ, вы можете использовать прозрачные границы вместо поля:

div {
  display: table-cell;
  border: 5px solid transparent;
}

Примечание: вы не можете использовать проценты здесь...: (