разница между для отображения таблицы-ячейки

Question

У меня есть следующий HTML

<div> 
<div id="one">one</div> 
<div id="two">two</div> 
</div> 

И я применял следующие CSS

#one, #two{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red; 
    border-collapse: separate; 
    border-spacing: 10px; 
} 

demo

Но не могли бы достичь, как мой желаемого. Мне нужно пространство между двумя div. Если я дам значение дополнения, он даст пространство, но не удалит фон.

Answer 1

Вы должны поместить border-spacing и border-collapse правила на родительский DIV, а не в table-cell дивы.

Answer 2

Изменить display: table-cell;display: inline-table; или display: inline; Надеюсь, это то, что вы ищете.

Answer 3

Попробуйте JSFiddle

http://jsfiddle.net/arunberti/WNKCZ/1/

#main 
{ 
    border-spacing:10px; 
} 

Answer 4

Просто изменить код CSS, как показано ниже:

#one, #two{ 
    display: inline; 
    vertical-align: middle; 
    height: 47px; 
    background: red; 
    border-collapse: separate; 
    border-spacing: 10px; 
} 

я изменил дисплей свойство таблицы клеток в рядный. Вы также можете использовать встроенный стол

Следующая Вы можете использовать маржу свойство, чтобы сделать пространство между двумя блок (т.е. запас-слева. 20px;).

Answer 5

Добавить "Граница-разнос" в родительском DIV

<div style="border-spacing: 10px;"> 
<div id="one">one</div> 
<div id="two">two</div> 
</div> 

Answer 6

Используйте следующее свойство:

<div style="border-spacing: 10px;"> 
    <div id="one">one</div> 
    <div id="two">two</idv> 
</div> 

Или использование следующих стилей CSS:

#one, #two{ 
    display: table-cell; 
    vertical-align: middle; 
    height: 47px; 
    background: red; 
    border-collapse: separate; 
    border-spacing: 10px; 
    border: 3px solid #fff; 
}