title: Adding 1px padding causes outer div to contain child margins
body: <p>When the child of a div contains margins, those margins are not included in the calculation of <code>div.offsetHeight</code>. <em>Except</em>, however, when you do certain things to the parent div, including giving it 1px of padding. </p>
  
  <p>The code below causes the reported height of the div to jump from 38px to 83px (the "right" size, including child margins). Adding a border to the element has the same effect.</p>
  
  <p>What is going on here? Is this defined behavior? Also, is there anyway to get the actual height of the element (including child margins, but not its own margins) without this 1px hack?</p>
  
  <p>(The context for this question is that I was resizing an iframe on window resize, and the calculations only worked properly when the 1px padding was included.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var hasPadding = false;
  
  var alertDivHeightButton = document.getElementById('2');
  alertDivHeightButton.onclick = alertDivHeight;
  var togglePaddingButton = document.getElementById('3');
  togglePaddingButton.onclick = togglePadding;
  
  function alertDivHeight () {
      var div = document.getElementById('1');
      alert("width of div: " + div.offsetHeight);
  }
  
  function togglePadding () {
      var div = document.getElementById('1');
      if (hasPadding) {
          div.style.padding = '0px';
          togglePaddingButton.value = "Add 1px padding";
      } else {
          div.style.padding = '1px';
          togglePaddingButton.value = "Remove 1px padding";
      }
      hasPadding = !hasPadding;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="1"&gt;
      &lt;h1&gt;Hello, world&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;input type="button" id="2" value="Alert div height"&gt;
  &lt;input type="button" id="3" value="Add 1px padding"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/axrqdmwb/" rel="nofollow">JSFiddle</a></p>