CSS: la Police de la marge supérieure

Je sais que le titre de cette question est stupide, mais je ne pouvais pas trouver quelque chose de mieux. J'ai cherché pendant des heures sur ce sujet, mais je recherche quelque chose de mal, ou alors j'ai manqué un peu de CSS de base.

J'ai un div conteneur avec un 40x40px background-image placée dans le coin supérieur gauche. Je veux aligner le haut du texte à partir d'une balise h2 avec le haut de cette image de fond d'écran, j'ai essayé de faire comme ça.

HTML:

<div id="container">
  <h2 id="title">Lorem</h2>
</div>

CSS:

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

#container {
    background: url('test-icon.png') top left no-repeat;
    margin: 200px auto; /* To center the container on the page*/
    min-height: 50px;
    padding-left: 50px; /* To prevent the text from "colliding with the background-image"*/
    width: 300px;
}

#title {
    font-family: "Arial Black", Arial, Helvetica, sans-serif;
    font-size: 1.3em;
    text-transform: uppercase;
}

J'ai utilisé Eric Meyers CSS reset pour se débarrasser de styles spécifiques au navigateur, mais ils ont laissé dans le code ci-dessus.

J'ai créé un live exemple

Le problème est que l'image de fond d'écran et le haut du texte de l'h2-tag ne s'alignent pas - il y a une petite "marge" dans le haut de la balise h2. Cette marge semble changer avec la taille de la police. Lorsque j'utilise Google Chromes inspecteur, il me dit que la marge et le remplissage de la h2 et balise div sont tous 0px. Comme les navigateurs de rendu des polices différemment, je n'ai pas mant pour déconner avec des marges négatives dans le cas où il se casse la mise en page. Est-il un moyen de "sécurité", de se débarrasser de cette marge? Pour être tout à fait clair, ce que je veux atteindre est cette.

OriginalL'auteur Tomas Lieberkind | 2011-06-08