CSS: Lề đầu khi cha mẹ không có đường viền

Question

Như bạn có thể thấy trong this picture, tôi có một màu cam div bên trong một màu xanh lá cây div không có đường viền trên cùng. Màu cam div có một lề trên cùng là 30px, nhưng nó cũng đẩy màu xanh lá cây div xuống. Tất nhiên, việc thêm một đường viền trên cùng sẽ khắc phục vấn đề, nhưng tôi cần màu xanh lá cây div để có đường viền trên đầu. Tôi có thể làm gì?

.body { 
 
\t border: 1px solid black; 
 
\t border-top: none; 
 
\t border-bottom: none; 
 
\t width: 120px; 
 
\t height: 112px; 
 
\t background-color: lightgreen; 
 
} 
 

 
.body .container { 
 
\t background-color: orange; 
 
\t height: 50px; 
 
\t width: 50%; 
 
\t margin-top: 30px; 
 
}

<div class="header">Top</div> 
 
<div class="body"> 
 
\t <div class="container">Box</div> 
 
</div> 
 
<div class="foot">Bottom</div>

Cảm ơn

Answer 1

Bạn có thể thêm overflow:auto vào .body để ngăn việc thu hẹp ký quỹ. Xem http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Answer 2

Sử dụng padding thay vì margin:

.body .container { 
    ... 
    padding-top: 30px; 
} 

Answer 3

Bạn có thể thêm padding-top: 30 trên hộp màu xanh lá cây, sử dụng vị trí tương đối trên hộp màu cam với top: 30px hoặc thả nổi hộp màu cam và sử dụng cùng một số margin-top: 30px.

Answer 4

Bạn đọc tài liệu này: Box model - Margin collapsing

CSS

.body { 
    border: 1px solid black; 
    border-bottom: none; 
    border-top: none; 
    width: 120px; 
    height: 112px; 
    background-color: lightgreen; 
    padding-top: 30px; 
} 

.body .container { 
    background-color: orange; 
    height: 50px; 
    width: 50%; 
} 

Answer 5

Những gì bạn cảm nhận được lợi nhuận bị sụp đổ. Lề không chỉ định một khu vực xung quanh một phần tử, mà là khoảng cách tối thiểu giữa các phần tử.

Vì vùng chứa màu xanh lá cây không có đường viền hoặc đệm, không có gì chứa lề của phần tử màu da cam. Lề được sử dụng giữa phần tử trên và phần tử màu cam giống như vùng chứa màu xanh lá cây sẽ có lề.

Sử dụng đệm trong vùng chứa màu xanh lá cây thay vì lề trên phần tử màu da cam.

Answer 6

Không chắc chắn về cách âm thanh này gây ra, nhưng làm cách nào để thêm đường viền trong suốt?

Answer 7

Không chắc nếu điều này sẽ làm việc trong trường hợp của bạn, nhưng tôi chỉ giải quyết này với các thuộc tính CSS sau

#element { 
    padding-top: 1px; 
    margin-top: -1px; 
} 

#element đang bị đẩy xuống bởi vì nó là phần tử con đầu tiên đã có một margin-top: 30px. Với CSS này, nó bây giờ hoạt động như mong đợi :) Không chắc chắn nếu nó sẽ làm việc cho mọi trường hợp, YMMV.