Không thể sử dụng lề phải âm trên phần tử bảng?

Question

Tôi đang cố gắng sử dụng các phần tử ô trong hệ thống lưới sử dụng lề âm trên các hàng để loại bỏ máng trái và phải trên các phần tử lưới lồng nhau. Này hoạt động tốt trên nổi và inline-block yếu tố, nhưng yếu tố với display: table, đồng thời tôn trọng lề âm trái, bỏ qua lề phải tiêu cực:

Strange, eh? Một ví dụ đơn giản: http://jsfiddle.net/57FAN/1/

Tất cả các trình duyệt dường như đã thực hiện điều này theo cách tương tự, thật không may. Ý tưởng nào?

P.S. Hãy trì hoãn cuộc tranh luận về các yếu tố bảng- * để bố trí cho đến khi hộp flex được chuẩn hóa.

Answer 1

Bảng không bỏ qua lề âm, nhưng chỉ có chiều rộng 100% và dịch chuyển 5px sang trái. Bạn sẽ cần một "100% + 2 * 5px" để điền vào khu vực màu xám hoàn toàn.

Hàng không có chiều rộng, do đó sử dụng toàn bộ chiều rộng có sẵn.

Nếu bạn muốn sử dụng

.row { 
    margin: 0 -5px; 
    width: 100%; 
} 

bạn sẽ thấy rằng độ rộng đều bình đẳng

Answer 2

Mã của bạn có nhiều margin và padding tài sản của. vì vậy nó trông như thế. Ở đây tôi sửa một số mã.

Fiddle DEMO