Probléme de marges

Bonjour j'ai un soucis avec une marge qui se trouve dans un span.
En fait afin d'avoir un background dans mon h1 de la longeur du texte du h1 j'ai mis en place un span.
Le soucis et que je veu un marge de 20px au dessus de mon h1 et que le margin-top:20px du span ne fonctionne pas.
le margin-left:30px; fonctionne bien j'ai bien une marge de 30 px.

Savez vous si je peu faire autrement pour enfin avoir ma margetop qui fonctionne ou y'a il une erreur dans mon css ?

h1 { font-size:16px; color:#FF6600; margin:0; padding:0; }
h1 span{ background:#666666; padding:10px; border:#99CC00 1px solid; margin-left:30px; margin-top:20px;}  

  <h1><span>Mon texte avec un fond</span></h1>

Salut,

La page en ligne est souvent bien plus parlante, l'élément principale de l'analyse, la compréhension et la résolution des problèmes. Peut être te faudrait-il essayer d'améliorer tes chances de réponse en nous en apportant une ?

bonjour,
Si j'ai bien compris, il suffit d'ajouter un display inline-block

h1 span{
 background:#666666;
 padding:10px;
 border:#99CC00 1px solid;
 margin-left:30px;
 margin-top:20px;
 display:inline-block;
}

Merci K-2 c'est exactement ça. Avec display:inline-block; sa fonctionne a merveil. j'ai bien ma marge qui fonctionne.
Merci

Effectivement, un margin-top sur un élément en display:inline ça ne marche pas des masses.
Mais passer en display:inline-block me semble être une mauvaise solution. Pourquoi ne pas attribuer ce margin-top au H1, ou (si c'est l'effet recherché) appliquer un padding à ce dernier?