Why does div display:table-row ignore margin?

Question

The following html works as expected apart from margin-top being completely ignored by table row div. And I can't figure out why.

<div class='table'>

  <div class='margin-top5 row user' id='user_113'>
    <div class='cell left avatar margin-right5'><img alt="Blank_avatar_thumb" src="/images/blank_avatar_thumb.png?1295354025" /></div>
    <div class='cell left'>
      <div class='bold'><a href="/voisins/113">Dandre</a></div>
      <div class='small of_hidden'>toothpicking, veryveryveryveeerrrryyyyyylooooooooong, kidnapping...</div>
    </div>
    <div class='cell right'>42</div>

    <div class='clear'></div>
  </div>
  /* more rows */
</div>

css:

div.table {
  display: table;
  width: 100%;
}
div.row {
  display: table-row;
}
div.cell {
  display: table-cell;
}
div.left {
  float: left;
}
div.right {
  float: right;
}
div.clear {
  clear: both;
}
.avatar {
  vertical-align: middle;
}
.margin-top5 {
  margin-top: 5px;
}
.margin-right5 {
  margin-right: 5px;
}
.bold {
  font-weight: bold;
}
.of_hidden {
  overflow: hidden;
}
.small {
  font-size: 0.8em;
}
body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
}

EDIT:

If I remove .row class from row div, it starts picking up margin-top.

Steven K. · Accepted Answer · 2011-01-20T11:48:56.017

15

This is the cullprit: display: table-row; You're telling the div to behave like a tr, tr's don't have a margin... or padding.

You can apply a padding to a td, but not a margin.

edited Jan 20 '11 at 11:48

answered Jan 19 '11 at 17:47

Steven K.

2,097
16
15

1

That is very counterintuitive - it is div after all... And btw margin applies correctly to `display: table-cell;` (it is in the code sample) – artemave Jan 20 '11 at 09:27
3

Yes, the margin works for a div with `display: table-cell;` however you still cannot apply a margin to a `td` element. So then we have `display: table-row;` which behaves as if it were a `tr` and `display: table-cell;` which doesn't behave like a `td`... very counter intuitive indeed. – Steven K. Jan 20 '11 at 11:46
1

@artemave — it is not counterintuitive, there are lots of rules for which CSS properties may apply to elements based on the value of the display property applied to the element. There are none at all that are based on what the element is or what its *default* display value is. – Quentin Jan 20 '11 at 12:01
@Quentin while your statement is true, i don't see how it's relevant. it's _still_ counterintuitive that in this case you can apply margins to a cell but not a row. – Jonah Aug 30 '17 at 22:15

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

Use border-spacing: 10px; for the div with display:table;

Use this link for refference: space between divs - display table-cell

edited May 23 '17 at 12:02

Community

1
1

answered Feb 12 '14 at 07:44

kdobrev

270
1
3
11

Why does div display:table-row ignore margin?

2 Answers2