title: why is this container div taller than required to wrap the image it contains?
body: <p>I am wondering why there is vertical space between the bottom borders of the image and containing div in the following:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;html xmlns:fb="http://www.facebook.com/2008/fbml"&gt;&lt;!--facebook--&gt;
  &lt;head&gt;&lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
  &lt;title&gt;test&lt;/title&gt;
  
  &lt;style&gt;
  
      .box {
          border:1px solid black;
      }
  
      .image {
          border:1px solid red;
      }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="box"&gt;
          &lt;img class="image" src="http://i.imgur.com/o2udo.jpg" /&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>