У меня есть два div:
<div style="display:table-cell" id="div1">
content
</div>
<div style="display:table-cell" id="div2">
content
</div>
Есть ли способ освободить место между этими двумя div (имеющими display:table-cell
)?
html
css
css-tables
Система-x32z
источник
источник
position: relative
.position: relative
наtable-*-group
,table-row
,table-column
,table-cell
, иtable-caption
элементы , не определен.border-right: 10px solid #FFF
. Это хорошо сработало для меня при разработке раскрывающегося меню CSS, когда мне нужно было немного места междуtable-cell
элементами.По возможности используйте прозрачные границы.
Демо JSFiddle
https://jsfiddle.net/74q3na62/
HTML
CSS
Объяснение
Вы можете использовать это
border-spacing
свойство, как предполагает принятый ответ, но это не только создает пространство между ячейками таблицы, но также между ячейками таблицы и контейнером таблицы. Это может быть нежелательно.Если вам не нужны видимые границы на ячейках таблицы, вы должны использовать
transparent
границы для создания полей ячеек. Прозрачные границы требуют настройки,background-clip: padding-box;
иначе цвет фона ячеек таблицы будет отображаться на границе.Прозрачные границы и фоновый клип поддерживаются в IE9 и выше (и во всех других современных браузерах). Если вам нужна совместимость с IE8 или не нужно фактическое прозрачное пространство, вы можете просто установить белый цвет границы и
background-clip
не использовать.источник
источник
Что ж, все вышеперечисленное работает, вот мое решение, которое требует немного меньше разметки и является более гибким.
источник
Создайте новый div с любым именем (я просто использую разделение таблицы) и задайте ему ширину, не добавляя к нему содержимое, при этом поместив его между необходимыми div, которые необходимо разделить.
Вы можете добавить любую ширину, которую сочтете нужной. Я просто использовал 0,6%, потому что это то, что мне было нужно, когда мне приходилось это делать.
источник