margin top to div внутри другого div

Question

У меня есть два div, у которых есть фоновое изображение, и я хотел бы добавить маржу к 2-му div, но он создает пустое пространство.

Как я могу добавить верхнюю маржу, сохраняя div внутри другого 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

Вы можете сделать использование cssposition собственности здесь.

Пример кода

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

удалить margin-top:20px; и добавить position и top недвижимость для .logo.

Answer 2

Вы можете использовать overflow: auto на родительский элемент

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

Demo

Просто получил ссылку на share, который связан с этим вопросом.

---

Кроме того, лучший подход к этому является вместо использования position: absolute; вы должны использовать position: relative; с top, left, right и bottom свойства, которые не только сохранить элемент в обращении, он также избавит вас от позиционирования другие элементы в одном блоке.

Demo 2

Answer 3

Just Go через код.

Просто изменив положение и верхнее значение, мы получим результат.

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