Почему 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