9
html sau hoạt động như dự kiến ngoài lề-top bị bỏ qua hoàn toàn bởi div hàng trong bảng. Và tôi không thể hiểu tại sao.Tại sao hiển thị div: lề bỏ qua hàng bảng?
<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:
Nếu tôi loại bỏ .row lớp từ hàng div, nó bắt đầu nhặt margin-top.
Đó là rất phản trực giác - đó là div sau khi tất cả ... Và btw lề áp dụng một cách chính xác cho 'display: table-cell;' (nó đang ở trong mẫu mã) – artemave
Có, lề hoạt động cho một div với 'display: table-cell;' tuy nhiên bạn vẫn không thể áp dụng một margin cho một phần tử 'td'. Vì vậy, sau đó chúng ta có 'display: table-row;' hoạt động như thể nó là một 'tr' và' display: table-cell; 'không hoạt động giống như' td' ... thực sự rất trực quan. –
@artemave - nó không phản trực giác, có rất nhiều quy tắc mà thuộc tính CSS có thể áp dụng cho các phần tử dựa trên giá trị của thuộc tính hiển thị được áp dụng cho phần tử. Không có gì ở tất cả được dựa trên yếu tố là gì hoặc giá trị hiển thị * mặc định * của nó là gì. – Quentin