9
以下のhtmlは、margin-topを除いて期待通りに動作し、テーブル行のdivによって完全に無視されます。そして私は理由を理解できません。divが表示されるのはなぜですか？table-rowはマージンを無視しますか？
<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：
私は、行のdivから.rowクラスを削除した場合、それはマージントップを拾って起動します。
非常に直観に反している - それは、すべての後にdiv要素である...そしてところでマージンが表示 'に正しく適用されます。テーブルのセルを;'（これは、コードサンプルです） – artemave
はい、余白は 'display：table-cell;'でdivのために働きますが、 'td'要素に余白を適用することはできません。それで 'display：table-row;'が 'tr'と' display：table-cell; 'のように振る舞い、' td'のように振る舞いません。 –
@artemave - 直感的ではないので、CSSプロパティが要素に適用される表示プロパティの値に基づいて要素に適用されるルールが多数あります。その要素が何であるか、またはそのデフォルト値が何であるかに基づいているものはまったくありません。 – Quentin