Các phần tử con có lề trong DIV

Question

Tôi cần hai liên tiếp div s (có nền) để được chạm liền mạch, bên dưới cái kia. Tuy nhiên, bố cục này bị vỡ khi tôi đặt một phần tử con p vào dưới cùng div. Lề của phần tử p buộc khoảng trống giữa cả hai div s. Đây là hành vi kỳ lạ, như tôi đang mong đợi biên độ của p để ở trong nội dung và khu vực nền của div. Nó hiển thị theo cùng một cách trên Firefox, Chrome và IE 8.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc"><p>Bottom Div</p></div> 

Đây là hình thức của nó.

tôi có thể sửa lỗi này bằng cách thay đổi lề cho miếng đệm không cho các phần tử p, nhưng sau đó tôi cũng sẽ phải làm điều này với các yếu tố tiêu đề, yếu tố danh sách, và bất kỳ yếu tố khác mà tôi muốn sử dụng tại bắt đầu một số div. Đó không phải là mong muốn.

Ai đó có thể khai sáng cho tôi: điều gì khiến tôi nhớ đến mô hình hộp? Có cách nào dễ dàng để khắc phục điều này, tốt nhất là bằng cách sửa đổi kiểu của div?

Answer 1

Đó là expected behavior *. Có một số cách để vượt qua nó. Nếu bạn thả nổi các div, chúng sẽ chứa các lề của các phần tử con và ngăn chặn sự sụp đổ lề. Cách tiếp cận khác là thêm đường viền hoặc đệm vào các div.

* Lề của div và p "kết hợp để tạo thành một lề duy nhất", mặc dù chúng được lồng nhau, vì chúng có lề liền kề không có đệm hoặc đường viền giữa chúng.

Answer 2

Thêm overflow: hidden hoặc overflow: auto để div

Answer 3

Thiết lập một đệm tích cực, và một biên độ âm tương ứng trên các yếu tố div dường như khắc phục vấn đề, mặc dù tôi biết không lý do tại sao.

<div style="background: #ccccff">Top Div</div> 
<div style="background: #ffcccc; padding: 1px; margin: -1px"><p>Bottom Div</p></div> 

Answer 4

Giải pháp 1

Add overflow: hidden/tự động để div chứa để ngăn chặn sự sụp đổ lề.

Giải pháp 2

Thêm đệm tích cực cho div chứa và lợi nhuận tiêu cực bằng các yếu tố bên trong

Giải pháp mới

Thêm đệm của 0.01px để div chứa này sẽ ngăn biên độ thu hẹp nhưng không cần bất kỳ lề âm nào trên phần tử bên trong.