Le code html suivant fonctionne comme prévu, sauf que margin-top est complètement ignoré par div table row. Et je ne peux pas comprendre pourquoi.Pourquoi div affiche-t-il: la marge de table ignore la marge?
<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:
Si je supprime .row
classe de rang div, il commence à ramasser margin-top.
qui est très contre-intuitif - il est div après tout ... Et BTW marge applique correctement'Affichage: table-cell; '(il est dans l'exemple de code) – artemave
Oui, la marge fonctionne pour une div avec 'display: table-cell; 'mais vous ne pouvez toujours pas appliquer de marge à un élément' td'. Alors nous avons 'display: table-row;' qui se comporte comme si c'était un 'tr' et' display: table-cell; 'qui ne se comporte pas comme un' td' ... très contre-intuitif en effet. –
@artemave - il n'est pas contre-intuitif, il y a beaucoup de règles pour lesquelles les propriétés CSS peuvent s'appliquer aux éléments en fonction de la valeur de la propriété d'affichage appliquée à l'élément. Il n'y en a aucun qui soit basé sur ce qu'est l'élément ou sur sa valeur d'affichage * default *. – Quentin