Why is a div with display table-cell not affected by margin

Question

I have div elements next to each other with display  table-cell    I want to set margin between them  but margin  5px has no effect  Why   My code    lt div style  display  table-cell  margin  5px  background-color  red   gt 1 lt  div gt   lt div style  display  table-cell  margin  5px  background-color  green   gt 1 lt  div gt

User · Answer

Table cells don t respect margin  but you could use transparent borders instead   div     display  table-cell    border  5px solid transparent      Note  you can t use percentages here

User · Answer

You can use inner divs to set the margin    lt div style  display  table-cell   gt      lt div style  margin 5px background-color  red   gt 1 lt  div gt   lt  div gt   lt div style  display  table-cell    gt     lt div style  margin 5px background-color  green   gt 1 lt  div gt   lt  div gt    JS Fiddle

User · Answer

If you have div next each other like this   lt div id  1  style  float left  margin-right 5px  gt    lt  div gt   lt div id  2  style  float left  gt    lt  div gt    This should work

User · Answer

Cause  From the MDN documentation       The margin property  applies to all elements except elements with   table display types other than table-caption  table and inline-table   In other words  the margin property is not applicable to display table-cell elements   Solution  Consider using the border-spacing property instead   Note it should be applied to a parent element with a display table layout and border-collapse separate   For example   HTML   lt div class  table  gt       lt div class  row  gt           lt div class  cell  gt 123 lt  div gt           lt div class  cell  gt 456 lt  div gt           lt div class  cell  gt 879 lt  div gt       lt  div gt   lt  div gt    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 and vertically  As mentioned by Diego Quir  s  the border-spacing property also accepts two values to set a different margin for the horizontal and vertical axes   For example   table         border-spacing 3px 5px      3px horizontally  5px vertically

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

Examples related to html

Examples related to css