Пробел между двумя div в той же строке

Question

У меня этот довольно простой код - fiddle here.

CSS:

.subcontent > div { 
    display: table-cell; 
} 
.orangebox { 
    width: 55%; 
    background-color: red; 
    padding-top: 6px; 
} 
.bluebox { 
    width: 43%; 
    background-color: blue; 
    padding-top: 60px; 
} 
.spacer{ 
    width: 1%; 
} 

Ну, в коде вы можете увидеть два типа коробки, один с стиле «orangebox» и еще один рядом с ним в одной и той же линии с стиле «BlueBOX», и оба имеют стиль «display: table-cell».
Между этими двумя коробками есть «проставка», которая размещает пространство между ними с шириной 1%.
Единственная проблема возникает, когда вы увеличиваете/уменьшаете масштаб изображения на веб-странице (CTRL + или -), проставка с уменьшением масштаба становится больше 1% (вы можете легко ее реализовать), а при уменьшении размера проставки получить меньше с шириной и при глубоком увеличении проставка исчезает, и два ящика перекрываются.
Есть ли какое-либо решение установить пространство между двумя ячейками фиксированного пространства?

Answer 1

Я бы рекомендовал установить border-spacing: 10px; (или любую сумму, которую вы хотите) на родительский элемент, который установлен на display: table;. Это самый эффективный способ использования элементов пространства, которые используют свойства таблицы.

Если вам требуется больше контроля над интервалом, чем предусмотрено интервалом между границами, вам может потребоваться использовать что-то другое, кроме таблицы, для вашего макета, поэтому, надеюсь, это сработает для вас!

Вот обновление вашей скрипки демонстрации использования пограничного междурядья:

http://jsfiddle.net/vBngZ/7/