khoảng cách thẳng đứng css giữa các div

Question

Tôi biết đây là vấn đề phổ biến nhưng dường như tôi không thể tìm ra giải pháp hoạt động. Tôi có thiết lập như sau:

<div id="wrapper"> 
    <div class="content-area-top"></div> 
    <div class="content-area"> 
    <h1>Title</h1> 
    some other text 
    </div> 
</div> 

.content-area-top { 
    height: 12px; 
    width: 581px; 
    background-image: url(images/content-top.jpg); 
} 

.content-area { 
margin-left: 10px; 
margin-right: 10px; 
    background-color: #e9ecfd; 
} 

Vấn đề là có khoảng cách giữa .content-area-top và .content-area. div .content-area-top có kích thước để chứa hình nền cung cấp cho tôi các góc tròn mà tôi muốn.

Tôi biết rằng vấn đề xuất hiện khi thẻ H1 có bộ lề trên (trình duyệt mặc định) (.67em), nhưng tôi không muốn đặt lề của nó thành 0 và tôi không thấy lý do tại sao margin áp dụng 'bên ngoài' div chứa của nó.

Tôi đang sử dụng Chrome trên máy Mac, nhưng firefox có cùng vấn đề. Đây có lẽ là một số sửa chữa nổi tiếng, nhưng tôi không thể tìm thấy một giải pháp cụ thể cho trường hợp của tôi.

Answer 1

Xem ở đây cho một câu hỏi liên quan:

Why would margin not be contained by parent element?

trong đó một bài viết tuyệt vời về sự sụp đổ lề được trình bày:

http://reference.sitepoint.com/css/collapsingmargins

Bài báo không có một số gợi ý.

Câu trả lời là lề trên H1 bị thu hẹp với lề mẹ (.content-area) (0 trong trường hợp này), và do đó div cha sẽ nhận lãi H1. Để ngăn chặn điều đó, div mẹ (.content-area) cần phải có bộ đệm hoặc đường viền hoặc thứ gì đó được đặt để ngăn chặn sự sụp đổ (trong trường hợp của tôi, mang hai div của tôi lại với nhau một cách chính xác)

Answer 2

Hãy thử phương pháp này :

#content-area-top { 
    width:581px; 
    height:12px; 
    float:left; 
    background-image:url("images/content-top.jpg"); 
} 

#content-area { 
    width:561px; /* substract margin left & right values from it's width */ 
    float:left; 
    display:inline; /* prevent ie6-double-margin bug */ 
    margin:0 10px; 
    background-color:#e9ecfd; 
} 

#wrapper { 
    width:581px; 
    float:left; 
} 

Answer 3

Lề không thể sụp đổ nếu có đường viền giữa chúng. Vì vậy, bạn có thể thêm một đường viền ẩn để ngăn chặn sự sụp đổ lề.

Làm việc sau đây cho tôi trong các phiên bản thử nghiệm của FF, Chrome & IE.

<!-- Set the border-color to your background color. 
    If default white background colour use #FFFFFF --> 
<div style="background-color: #8DB3E2; border-color: #8DB3E2; border-style:solid; border-width:1px; "> 

    <p >Paragraph 1 in blue box</p> 

    <p >Paragraph 2 in blue box</p> 

    </div> 

    <!-- No space here thanks --> 

    <div style="background-color: #9BBB59; border-color: #9BBB59; border-style:solid; border-width:1px; "> 

    <p >Paragraph 1 in green box</p> 

    <p >Paragraph 2 in green box</p> 

    </div> 

Answer 4

Hãy thử cung cấp loại tài liệu hợp lệ. Nó làm việc cho tôi :)

Hãy tham khảo điều này: A list apart đã nói điều đó thật tuyệt vời!

Yogesh