title: Why would my IFRAME not fit its container DIV one to one?
body: <p>I create a popup using jQuery and when the popup includes a path, I include an IFRAME as the content of the popup. The code resizes the IFRAME to take the whole available space in the parent DIV of that IFRAME tag.</p>
  
  <p>The relevant code looks like this:</p>
  
  <pre><code>jQuery("&lt;div class='snap-popup' id='"
          + popup.id
          + "' style='position:fixed;display:none;'&gt;&lt;div class='close-popup'&gt;"
          + "&lt;/div&gt;&lt;div class='inside-popup'&gt;&lt;div class='popup-title'&gt;&lt;/div&gt;"
          + "&lt;div class='popup-body'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;")
      .appendTo("body");
  popup.widget = jQuery("#" + popup.id);
  i = popup.widget.children(".inside-popup");
  b = i.children(".popup-body");
  
  [...snip...]
  
  if(popup.path)
  {
      b.empty();
      b.append("&lt;iframe class='popup-iframe' src='" + popup.path + "' frameborder='0'"
              + " marginheight='0' marginwidth='0'&gt;&lt;/iframe&gt;");
      f = b.children(".popup-iframe");
      f.attr("width", b.width());
      f.attr("height", popup.widget.offset().top + popup.widget.height()
                           - b.offset().top);
  }
  </code></pre>
  
  <p>The <a href="http://sourceforge.net/p/snapcpp/code/ci/master/tree/snapwebsites/plugins/output/popup.js" rel="nofollow noreferrer">whole code</a> can be found on SourceForge.net. The resulting HTML looks like this (newlines and indentation added for clarity):</p>
  
  <pre><code>&lt;div class="snap-popup" id="create-finball" style="position: fixed;
        width: 500px; height: 300px; top: 27px; left: 390px; display: block;
        z-index: 3;"&gt;
    &lt;div class="close-popup"&gt;&lt;/div&gt;
    &lt;div class="inside-popup"&gt;
      &lt;div class="popup-title"&gt;&lt;/div&gt;
      &lt;div class="popup-body"&gt;
        &lt;iframe class="popup-iframe" src="/finball/company/create"
            marginheight="0" marginwidth="0" frameborder="0"
            height="265" width="500"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Again: I do not have any new-line or <code>&lt;br/&gt;</code> tags in that DOM. It's really just a DIV and a direct child IFRAME. That's it.</p>
  
  <p>Yet, when I check the sizes of the IFRAME and it's DIV container, I notice a difference in height. I have two screenshots that show the dimensions of the DIV and the IFRAME. We can see that the DIV is 4 pixels taller than the IFRAME (see layout in the bottom-right corner.)</p>
  
  <p>Is there any reason for those extra pixels in the DIV? When I dynamically change the height of the IFRAME in Firebug, the DIV changes its height too: the IFRAME height + 4.</p>
  
  <p><img src="https://i.stack.imgur.com/atZA9.png" alt="DIV dimensions"></p>
  
  <p><img src="https://i.stack.imgur.com/A1pxJ.png" alt="IFRAME dimentions"></p>