margine superiore per div in un altro div

Question

Ho due div che hanno un'immagine di sfondo e vorrei aggiungere margine al 2 ° div ma sta creando uno spazio bianco.

Come posso aggiungere un margine superiore mantenendo il div all'interno dell'altro 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

Si può fare un uso di cssposition proprietà qui.

codice di esempio

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

rimuovere margin-top:20px; e aggiungere position e top immobili per .logo.

Answer 2

È possibile utilizzare overflow: auto sull'elemento genitore

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

Demo

appena ricevuto un link per share che è legato a questo problema.

---

Inoltre, un approccio migliore verso questo è invece di utilizzare position: absolute; si dovrebbe usare position: relative; con top, left, right e bottom proprietà, che non solo mantenere l'elemento a galleggiante, sarà anche risparmiare da posizionamento altri elementi nello stesso blocco.

Demo 2

Answer 3

Basta andare attraverso il codice.

Cambiando solo la posizione e il valore massimo possiamo ottenere il risultato.

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