HTML, CSS i pionowe marginesy tekstu

To prawdopodobnie podstawowa sprawa, więc jeśli jest jakiś rodzaj informacji online na temat działania tekstu i marginesów w html, po prostu prześlij mi link.

W każdym razie mam problem z określeniem dokładnych marginesów tekstu. Poniżej znajduje się przykład obrazu, div zawierający tekst pod nim i więcej tekstu poniżej div. Inne marginesy są ustawione na 0, a marginesy dla elementu div to 10 pikseli górny i dolny, 0 lewy i prawy. Z nieznanych mi powodów okazuje się, że góra 16px, dół 14px. Mógłbym po prostu zrekompensować błąd definicjami marginesów, ale tak naprawdę chciałbym wiedzieć, co się dzieje, zamiast leczyć objawy.

<img src="images/temp/img.png" />
<div><p>Testing</p></div>
<h2>Siirry</h2>

A styl div to

div {
    color:#f00;
    text-transform:uppercase;
    font-size:9px;
    line-height:9px;
    height:9px;
    margin:10px 0;
    overflow:hidden;
}

Przykładowy obraz:

EDYTOWAĆ:

Więcej informacji, ponieważ mój punkt widzenia najwyraźniej nie wyszedł zbyt jasno: margines wynosi 10px według narzędzi takich jak Firebug. Nie o to proszę. Jednak ze względu na sposób renderowania czcionek pole tekstu jest w rzeczywistości większe niż rzeczywisty rozmiar tekstu. Powoduje to, że margines VISUAL jest większy niż zdefiniowany margines (co można zweryfikować mierząc go w Photoshopie lub podobnym oprogramowaniu). Poszukuję informacji o relacji między rozmiarem pola tekstu a rzeczywistym rozmiarem, aby móc poprawnie zdefiniować marginesy.