[Resolvido] Problema com margin-top

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?