lề trên để div bên trong div khác

Question

Tôi có hai div có hình nền và tôi muốn thêm lề vào div thứ hai nhưng nó tạo ra khoảng trắng.

Làm cách nào tôi có thể thêm lề trên cùng trong khi vẫn giữ div bên trong div khác?

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo { 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    margin-top:20px; 
} 

.background { 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
} 

Answer 1

Bạn có thể sử dụng tài sản cssposition tại đây.

Mẫu Mã

<div class="background"> 
    <div class="logo"> 
    </div> 
</div> 

.logo 
{ 
    background-image: url(image/logo2.png); 
    height:40px; 
    width:400px; 
    margin-left:100px; 
    display:block; 
    position:absolute; 
    top:20px; 
} 

.background 
{ 
    background-image: url(image/empback.png); 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    position:relative; 
} 

loại bỏ margin-top:20px; và thêm position và top tài sản cho .logo.

Answer 2

Bạn có thể sử dụng overflow: auto trên yếu tố phụ huynh

.background{ 
    background: #f00; 
    width:100%; 
    height:94px; 
    min-width:1345px; 
    overflow: auto; 
} 

Demo

Chỉ cần nhận được một liên kết đến share có liên quan đến vấn đề này.

---

Ngoài ra, một cách tiếp cận tốt hơn đối này là thay vì sử dụng position: absolute; bạn nên sử dụng position: relative; với top, left, right và bottom tài sản, mà sẽ không chỉ giữ cho các phần tử trong phao, nó cũng sẽ giúp bạn tiết kiệm từ vị các yếu tố khác trong cùng một khối.

Demo 2

Answer 3

Chỉ cần xem qua mã.

Bằng cách chỉ thay đổi vị trí và giá trị hàng đầu, chúng tôi có thể nhận được kết quả.

.logo{ 
position:relative; 
top:10px; 
background-color:black; 
height:40px; 
width:400px; 
margin-left:100px; 
display:block; 
margin-top:20px; 
} 

.background{ 
    position:absolute; 
    background-color:green; 
width:100%; 
    top:50px; 
height:94px; 
    min-width:1345px; 
}