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

211

У меня есть 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>
html css user1929946
источник

Ответы:

310

причина

Из документации MDN :

[Свойство margin] применяется ко всем элементам, кроме элементов с типами отображения таблицы, кроме table-caption, table и inline-table

Другими словами, 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

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

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

Например

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
Боаз
источник
6
Спасибо! Существует также это обозначение в случае, если горизонтальное и вертикальное пространство должно быть разным между границами: горизонтальное вертикальное;
Диего Кирос,
И я подумал, что нашел ошибку; Оказывается, мне нужно больше узнать CSS.
Пит Элвин
Я предполагаю, что это не действительно обрабатывает определенные левые / правые / верхние / нижние поля все же? И нет ли способа, чтобы конкретная таблица-ячейка имела другие отступы от остальных?
Натан
@Nathan paddingможет быть установлен для любого необходимого селектора (например, class или id), как обычно. Если вы имеете в виду интервал marginмежду ячейками, то его можно установить отдельно для вертикальной и горизонтальной осей, задав для него два значения border-spacing, но оно будет применяться ко всей таблице, а не к отдельным ячейкам.
Вооз
21

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

<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

urmurmur
источник
2
Это хорошая идея, если вы хотите оставить поле между ячейками, а не слева или справа от них. Тогда ваш CSS может быть чем-то вроде .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Но также обратите внимание на эту ошибку: красный и зеленый фон этого примера не обязательно будут совпадать по высоте, поскольку они не находятся в ячейках.
Хенрик N
8

Ячейки таблицы не учитывают поля, но вместо этого вы можете использовать прозрачные границы:

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

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

Крис Хэппи
источник
2

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

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

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

</div>

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

user123_456
источник
10
Хорошо, но что, если он хочет двух дивов одинаковой высоты? Float не может этого сделать.
Хиросима
И вот почему JS - это круто :)
Крис Хэппи
@ChrisHappy Никогда не используйте JavaScript, когда есть решение CSS. Ваш код просто становится громоздким.
ssc-hrep3
@ ssc-hrep3 Поскольку оперативность приходит по требованию, громоздких CSS-решений уже не достаточно ...
Крис
2
Их достаточно - особенно с учетом требований. Просто взгляните на flexbox, который теперь поддерживается большинством основных браузеров и очень легко решает эту проблему. Стили макетов никогда не должны выполняться с помощью JavaScript.
ssc-hrep3