Как активировать margin , когда table-cell

1. BEPDuKT (11.03.2013 / 09:55)
Народ, как включить свойство margin, когда используешь display: table-cell; ? Я уже столько сайтов перелопатил, так и не нашел нужной инфы. Может я чего не догоняю.

2. Лёха (11.03.2013 / 10:06)
ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin);

попробуй через border-spacing

3. BEPDuKT (11.03.2013 / 10:12)

Mr.White (11 Марта 2013 / 10:06)
ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin);

Добавлено через 02:54 сек.
попробуй через border-spacing

Я таблицы вообще стараюсь не использовать, даже в цсс.
Можешь подробнее про border-spacing?

4. Лёха (11.03.2013 / 10:15)
Описание
Задает расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

Синтаксис
border-spacing: значение1 [значение2]

Значения
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений два, то первое определяет горизонтальное расстояние, а второе — вертикальное.

Добавлено через 01:25 сек.
В общем работает как неповоротливое margin

Добавлено через 06:12 сек.
Display: table-cell

На мой взгляд, самое интересное из табличных значений display. Означает: «Веди себя как ячейка таблицы». По умолчанию это значение имеют элементы td и th. Свойства табличных ячеек и элементов со значением display: table-cell:
идущие подряд ячейки находятся на одной строке с себе подобными, не переходя на следующую; если ячейкам на строке тесно, они сначала ужимаются по ширине, а затем начинают распяливать контейнер и/или окно браузера;

ширина ячеек по умолчанию распределяется пропорционально содержанию (с учётом всех ячеек в данной строке), однако может прямо задаваться через css;

все ячейки в строке имеют одинаковую высоту, которая определяется содержанием самой большой ячейки в данной строке;

ячейка может иметь внутренние отступы (padding), но не может иметь полей (margin);

к табличным ячейкам применимо вертикальное выравнивание по табличному принципу: свойство vertical-align выравнивает содержание ячейки по высоте относительно самой ячейки, при этом ячейки в строке сохраняют одинаковую высоту, в отличие от строчных или строчно-блочных элементов. Значения vertical-align не бывают отрицательными;

содержание ячейки может выравниваться по горизонтали (text-align);

у ячейки может быть рамка, но чтобы повлиять на слияние/расклеивание рамок, надо соответствующие свойства назначать контейнеру, а не текущему элементу; кстати, в старых версиях Оперы у элементов со значением table-cell значение border-spacing почему-то было ненулевым и создавало лишние зазоры, в силу чего таким элементам требовалось правило border-collapse: collapse; сейчас этого, вроде бы, не наблюдается.
Интересно, что если родительский элемент со свойством display: table или table-row наряду с потомками типа table-cell содержит элементы с другими типами отображения, то группа не табличных элементов образует ещё одну ячейку в той же строке, в противном случае строка разрывается.

Далее идут совсем уж малоупотребительные типы отображения; по мере того, как будет уходить IE7, можно будет уделить им больше внимания, а пока достаточно краткого перечисления.

5. BEPDuKT (11.03.2013 / 11:03)
4. Mr.White,
.green {
border-spacing: 3px;
display: table-cell;
margin: 3px;
padding: 6px;
border: 1px solid #95BB96;
}
---------
<span class="green">test</span><span class="green">test</span>
-------------
Нифига не меняется с добавлением бордер-спайсинг

6. Лёха (11.03.2013 / 11:33)
5. BEPDuKT, да, видимо border-spacing работает только для table, тогда извини, не знаю

7. BEPDuKT (11.03.2013 / 11:33)
Mr.White, Печально(

8. Виталий (11.03.2013 / 11:56)
почему такая большая необходимость в table-cell? можно ж другим путем пойти

9. BEPDuKT (11.03.2013 / 20:25)

Виталик Альянс (11 Марта 2013 / 11:56)
почему такая большая необходимость в table-cell? можно ж другим путем пойти

Иногда нужно это свойство, ибо нет аналогов.

URL: https://visavi.net/topics/37070