Question

This is probably basic stuff, so if there’s some kind of online reference for how html text & margins work, please just throw me a link.

Anyway, I’m having some trouble defining exact margins for text. Below is an example of an image, a div containing text below it and more text below the div. Other margins are set to 0, and margins for the div is 10px top & bottom, 0 left & right. For reasons unknown to me, it turns out 16px top, 14px bottom. I could just compensate the error with the margin definitions, but I would actually like to know what’s going on instead of treating the symptoms.

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

And style for the div is

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

Example image:

EDIT:

More info since my point didn’t apparently come out very clearly:
The margin is 10px according to tools such as Firebug. That is not what I’m asking. However because of the way the fonts are rendered, the box of the text is actually larger than the actual size of the text. This causes the VISUAL margin to be larger than the defined margin (which you can verify by measuring it in Photoshop or simnilar software). I’m looking for information about the relation between text’s box size and actual size, so I can define margins properly.

Answer 1

That’s because the font doesn’t use the entire height. A better (though maybe not perfect) indication would be to select the text and check the margins between the black border and the highlighted rectangle. And that goes for the text below ‘testing’ too. It will occupy part of those 14px.