html - Why is a div with "display: table-cell;" not affected by margin? -

i have div elements next each other display: table-cell;.

i want set margin between them, margin: 5px has no effect. why?

my code:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div> <div style="display: table-cell; margin: 5px; background-color: green;">1</div> 

cause

from the mdn documentation:

[the margin property] applies elements except elements table display types other table-caption, table , inline-table

in other words, margin property not applicable display:table-cell elements.

solution

consider using border-spacing property instead.

note should applied parent element display:table layout , border-collapse:separate.

for example:

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;} 

see jsfiddle demo

---

different margin horizontally , vertically

as mentioned diego quirós, border-spacing property accepts 2 values set different margin horizontal , vertical axes.

for example

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */