為什么div顯示：table-row忽略保證金？

Question

以下html按預期工作，除了margin-top被表行div完全忽略。 我無法弄清楚原因。

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

編輯 ：

如果我從行div中刪除.row類，它會開始拾取margin-top。

Answer 1

這是cullprit： display: table-row; 你告訴div表現得像tr ， tr沒有margin ......或padding 。

您可以將padding應用於td ，但不能應用margin 。

Answer 2

使用border-spacing：10px; 用於顯示的div：table;

使用此鏈接進行參考： div之間的空格 - 顯示表格單元格