[Resolvido] Problema com margin-top

[eduardocintra 1]

Bom dia a todos,

 

Estou com uma duvida cruel e não sei a melhor forma para solucioná-la, espero que vocês possam me ajudar.

Vamos ao problema:

 

Você tem uma div com o id “div1” e um título “h1” dentro dessa div.

 

<div id=”div1”>
<h1>Este é meu título</h1>
</div>

 

O css da div e o título são os seguintes:

 

<style type="text/css">
#div1{
width:500px; height:300px; background:#333;
}

#div1 h1{
color:#FFF; margin-top:20px;
}
</style>

 

O problema é que eu gostaria que só o título descesse 20px, o que não acontece pois a div vem junto.

Eu atualmente resolvo este problema utilizando o float: left; no h1 mais sei que não é a forma correta.

Alguém ai já passou por isso? E como resolveu?

[Public2004 79]

#div1{
       width:500px; height:300px; background:#333;
       overflow:hidden;
}

 

Att.

[eduardocintra 1]

#div1{
       width:500px; height:300px; background:#333;
       overflow:hidden;
}

 

Att.

 

Nossa muito obrigado cara,

 

Só uma coisa essa é a forma correta de se fazer isso né? digo, não vai atrapalhar outras divs que vierem a ser inserida no documento.

[Léo Motta 1]

Caraca passei por isso a uma hora atraz e resolvi também desta mesma maneira..acredito que essa seja sim a melhor forma de resolver!

[William Bruno 1501]

O problema é que eu gostaria que só o título descesse 20px, o que não acontece pois a div vem junto.

Eu atualmente resolvo este problema utilizando o float: left; no h1 mais sei que não é a forma correta.

nesse caso, eu acredito que um padding-top seja uma solução adequada.(no lugar do margin-top)