margines górny do div wewnątrz innego div

Question

Mam dwa divy, które ma obraz tła i chciałbym dodać margines do 2 div, ale tworzy on białe spacje.

Jak dodać górny margines, pozostawiając element div wewnątrz innego elementu div?

<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

Można dokonać wykorzystanie cssposition nieruchomości tutaj.

Przykładowy kod

<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; 
} 

usunąć margin-top:20px; i dodać position i top nieruchomość za .logo.

Answer 2

Można użyć overflow: auto na elemencie macierzystym

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

Demo

Właśnie link do share co wiąże się z tym problemem.

---

Również lepsze podejście to zamiast używać position: absolute; należy użyć position: relative; z top, left, right i bottom właściwości, które nie tylko utrzymać element w obrocie, będzie to również zaoszczędzić od pozycjonowania inne elementy w tym samym bloku.

Demo 2

Answer 3

Just Go poprzez kod.

Zmieniając pozycję i najwyższą wartość, możemy uzyskać wynik.

.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; 
}