Чому є 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

— користувач1929946
джерело

310

Причина

З документації MDN :

[Властивість поля] застосовується до всіх елементів, крім елементів із типами відображення таблиць, крім таблиць з підписом, таблиці та вбудованої таблиці

Іншими словами, 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можна встановити для будь-якого необхідного селектора (наприклад, класу або ідентифікатора), як зазвичай. Якщо ви маєте на увазі marginміж осередками, то це можна встановити окремо для вертикальної та горизонтальної осей, встановивши два значення border-spacing, але це стосуватиметься всієї таблиці, а не для окремих комірок.

— Боаз

21

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

<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

— урмурмур
джерело

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 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-рішень більше не вистачає ...

— Chris Happy

2

Їх достатньо - особливо з чуйними вимогами. Просто погляньте на флексбокс, який зараз підтримується більшістю основних браузерів і вирішує цю проблему дуже легко. Стилі компонування ніколи не повинні виконуватись JavaScript.

— ssc-hrep3