Tại sao hiển thị: ô bảng bị ảnh hưởng bởi các phần tử trong các ô khác

Question

Trong bảng CSS, ai đó có thể giúp tôi hiểu tại sao yếu tố đệm trong cột đầu tiên sẽ ảnh hưởng đến div trong cột thứ hai?

Đây là ví dụ trong đó một đoạn có bộ đệm. DIV ở cột bên phải cũng được đệm đúng cách. Tôi đã có vấn đề tương tự khi chỉ định chiều cao dòng trên nội dung cột bên trái nhưng đơn giản hóa ví dụ cho câu hỏi này.

http://jsfiddle.net/APXT7/2/

Có rất nhiều tương tự/câu hỏi liên quan về table-cell nhưng tôi không thể tìm thấy một giải quyết cụ thể câu hỏi này.

Answer 1

Điều này rất có thể là vấn đề về chiều cao dòng, thay vì một trong các phần đệm. Điều đó có nghĩa rằng, mặc dù bạn có thể nghi ngờ, không có padding thực sự được tuyên truyền cho cột bên phải của bạn (giá trị tính toán vẫn là số không). Tôi vẫn gọi đó là hiệu ứng phụ điều chỉnh phần đệm trên các yếu tố p của bạn.

Đệm trên đỉnh và dưới cùng của các yếu tố p đẩy đường cơ sở của chúng xuống. Điều này làm cho đường cơ sở của "ô" khác trên cùng một dòng/hàng cũng thay đổi. Tất nhiên, bạn có thể tìm thấy tất cả các gritty nitty vạch ra trong spec, nhưng kể từ khi cả hai "tế bào" có cùng một liên kết dọc (baseline), họ phải xếp hàng khi một trong những chuyển dịch.

Answer 2

Bạn có thể sử dụng thuộc tính dọc thẳng hàng (vertical-align:top) trên lớp ô hoặc div như jsfiddle.net/j08691/APXT7/4. Vì những div này được hiển thị dưới dạng ô bảng, đây có thể là những gì bạn đang tìm kiếm.

Answer 3

Tôi đã tìm thấy một bản hack "khắc phục" điều này nhưng không biết tại sao. Điều đầu tiên bên trong các <div class='cell'> đặt <div class='hack'>&nbsp;</div> lớp hack là .hack { height: 0; } Điều này hoạt động nếu đặt trong ô bên trái hoặc bên phải