9
El html siguiente funciona como se esperaba aparte de margin-top siendo completamente ignorado por la tabla row div. Y no puedo entender por qué.¿Por qué div display: table-row ignora el margen?
<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;
}
EDITAR:
Si quito .row clase de la fila div, se inicia recogiendo margin-top.
Eso es muy contrario a la intuición - es div después de todo ... Y por cierto margen aplica correctamente a 'display: table-cell;' (está en el ejemplo de código) – artemave
Sí, el margen funciona para un div con 'display: table-cell;' sin embargo, todavía no puede aplicar un margen a un elemento 'td'. Entonces tenemos 'display: table-row;' que se comporta como si fuera 'tr' y' display: table-cell; 'que no se comporta como' td' ... muy contra intuitivo. –
@artemave - no es contrario a la intuición, existen muchas reglas para las cuales las propiedades de CSS pueden aplicarse a los elementos en función del valor de la propiedad de visualización aplicada al elemento. No hay ninguno que se base en qué es el elemento o cuál es su valor de visualización * predeterminado *. – Quentin