title: Why does container div insist on being slightly larger than IMG or SVG content?
body: <p>I'm trying to produce yet another lightbox as much needed HTML/CSS/Javascript practice, but I've encountered a styling issue that looks trivial (and probably is!) but I just can't solve it.</p>
  
  <p>I have a <code>div</code> that contains an <code>img</code>. No matter what I try (<code>border</code>, <code>margin</code>, <code>padding</code>, auto height etc.) I just can't make the <code>div</code> shrink to match the image dimensions. I've reduced the problem to this:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" &gt;
          &lt;title&gt;Layout experiments&lt;/title&gt;
  
          &lt;style type="text/css"&gt;
              #lightbox {
                  margin: 0;
                  padding: 0;
                  position    : fixed;
                  left        : 50%;
                  margin-left : -320px;
                  top         : 100px;
                  border-radius: 22px;
                  background  : #e0e0f0;
                  color       : #102020;
              }
  
              #lightbox img {
                  border-radius: 15px;
              }
              .imagebg {
                  margin      : 7px;
                  background  : black;
                  border-radius: 15px;
                  height      : 100%;
              }
  
          &lt;/style&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="lightbox"&gt;
              &lt;div class="imagebg"&gt;
                  &lt;img src="picture.jpg"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>'picture.jpg' is 640x400, but the container div wants to be 640x404, the difference showing itself as a black strip below the image. The div exists so that I can fade the image to black by blending it's opacity down to 0, swap it, then blend it back in.</p>
  
  <p>I've looked at the computed styles in multiple browsers and can't see where the 4px delta is coming from.</p>