Why Is a Div With "Display: Table-Cell;" Not Affected by Margin

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

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

<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 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 */

display: table-cell margins

Try to use Flexbox (flexbox) to separate child elements

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

CSS Cell Margin

Apply this to your first <td>:

padding-right:10px;

HTML example:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

CSS table layout: why does table-row not accept a margin?

See the CSS 2.1 standard, section 17.5.3. When you use display:table-row, the height of the DIV is solely determined by the height of the table-cell elements in it. Thus, margin, padding, and height on those elements have no effect.

http://www.w3.org/TR/CSS2/tables.html

Margin for element in div with display:table-cell moves content in other cell

Add the vertical-align: top property to the table-cells:

.container {  display: table;  border: 1px silver solid;}.container div {  display: table-cell;  padding: 10px;  vertical-align: top;}.more {  display: block;  border: 2px red solid;  margin-top: 20px;}

<div class="container">  <div>    Some jumping content here  </div>  <div>    <a href="#" class="more">More</a>  </div></div>

.table {
   display: table;
   height: 100px;
   width: 100%;
   table-layout: fixed;
}

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}