Looking for some guidance on how html text and margins work? If there's a good online reference you can point me to, I'd greatly appreciate it!
I'm currently struggling with setting precise margins for text. In the example below, there's an image followed by a div containing text and more text below the div. Despite having all other margins set to 0, the margins for this div are supposed to be 10px top and bottom, and 0 left and right. Strangely, it ends up being 16px at the top and 14px at the bottom. While I could adjust the margin definitions to correct this error, I'm more interested in understanding what's causing it instead of just addressing the symptoms.
<img src="images/temp/img.png" />
<div><p>Testing</p></div>
<h2>Siirry</h2>
The style for the div is as follows:
div {
color:#f00;
text-transform:uppercase;
font-size:9px;
line-height:9px;
height:9px;
margin:10px 0;
overflow:hidden;
}
Example image:
EDIT:
I realize my explanation may have been unclear. The margin is indeed set to 10px according to tools like Firebug. However, because of the way fonts are rendered, the text box ends up being larger than the actual size of the text itself. This discrepancy results in a visual margin that appears larger than the defined margin (which can be measured accurately using software like Photoshop). I'm seeking information on the relationship between text box size and actual size to properly define margins.