title: HTML, CSS & Vertical text margins
body: <p>This is probably basic stuff, so if there's some kind of online reference for how html text &amp; margins work, please just throw me a link.</p>
  
  <p>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 &amp; bottom, 0 left &amp; 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.</p>
  
  <pre><code>&lt;img src="images/temp/img.png" /&gt;
  &lt;div&gt;&lt;p&gt;Testing&lt;/p&gt;&lt;/div&gt;
  &lt;h2&gt;Siirry&lt;/h2&gt;
  </code></pre>
  
  <p>And style for the div is</p>
  
  <pre><code>div {
      color:#f00;
      text-transform:uppercase;
      font-size:9px;
      line-height:9px;
      height:9px;
      margin:10px 0;
      overflow:hidden;
  }
  </code></pre>
  
  <p>Example image:</p>
  
  <p><img src="https://i.stack.imgur.com/orMru.png" alt="Example"></p>
  
  <p>EDIT:</p>
  
  <p>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.</p>