Tôi có div yếu tố cạnh nhau với display: table-cell;.
Tôi muốn đặt margin giữa chúng, nhưng margin: 5pxkhông có hiệu lực. Tại sao?
Mã của tôi:
<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>Câu trả lời:
Từ tài liệu MDN :
[Thuộc tính lề] áp dụng cho tất cả các thành phần ngoại trừ các thành phần có loại hiển thị bảng khác với chú thích bảng, bảng và bảng nội tuyến
Nói cách khác, margintài sản không được áp dụng chodisplay:table-cell các yếu tố.
Xem xét sử dụng border-spacingtài sản thay thế.
Lưu ý rằng nó nên được áp dụng cho một phần tử cha có display:tablebố cục và border-collapse:separate.
Ví dụ:
HTML
<div class="table">
<div class="row">
<div class="cell">123</div>
<div class="cell">456</div>
<div class="cell">879</div>
</div>
</div>CSS
.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}Lề khác nhau theo chiều ngang và chiều dọc
Như Diego Quirós đã đề cập, border-spacingkhách sạn cũng chấp nhận hai giá trị để đặt lề khác nhau cho trục ngang và trục dọc.
Ví dụ
.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */paddingcó thể được đặt cho bất kỳ bộ chọn nào cần thiết (ví dụ: lớp hoặc id), như bình thường. Nếu bạn có nghĩa là margingiữa các ô, thì điều đó có thể được đặt riêng cho trục dọc và trục ngang bằng cách đặt hai giá trị thành border-spacing, nhưng nó sẽ áp dụng cho toàn bộ bảng chứ không áp dụng cho từng ô riêng lẻ.
Bạn có thể sử dụng div bên trong để đặt lề.
<div style="display: table-cell;">
<div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
<div style="margin:5px;background-color: green;">1</div>
</div>.inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. Nhưng cũng lưu ý về vấn đề này: nền màu đỏ và màu xanh lá cây của ví dụ này sẽ không nhất thiết phải phù hợp với chiều cao vì chúng không nằm trên các ô.
Các ô của bảng không tôn trọng lề, nhưng bạn có thể sử dụng các viền trong suốt:
div {
display: table-cell;
border: 5px solid transparent;
}Lưu ý: bạn không thể sử dụng tỷ lệ phần trăm tại đây ... :(
Nếu bạn có div bên cạnh nhau như thế này
<div id="1" style="float:left; margin-right:5px">
</div>
<div id="2" style="float:left">
</div>Điều này nên làm việc!