Đệm giữa "display: table-cell"

Question

Có cách nào để đặt đệm hoặc đường viền trong suốt xung quanh "ô" khi có display:table-cell không? Tôi muốn nền hiển thị thông qua không gian này, vì vậy tôi không thể chỉ đặt đường viền thành màu trắng và border-color:transparent không hoạt động đối với tôi vì một số lý do. Tôi đã kiểm tra w3schools và các trang web tương tự nhưng tôi đã không thể tìm thấy đặc điểm đặc biệt này.

Từ dùng Praveen Vijayan: http://jsfiddle.net/geymU/

Answer 1

Sử dụng border-spacing: 10px trên vùng chứa mẹ.

Trong trường hợp của bạn

#nav ul{ 
    display:table; 
    width:100%; 
    border-spacing: 10px; 
} 

Bạn cũng có thể cung cấp cho trên/dưới và sang trái/phải tách biệt như border-spacing: 10px 20px;

Answer 2

Khoảng cách giữa các tế bào được điều khiển bởi border-spacing và border-collapse thuộc tính trong bảng.

#nav ul { 
    display: table; 
    width: 100%; 
    background: yellow; 
    border-collapse: separate; 
    border-spacing: 12px 6px; 
}