title: HTML element height including margin and children's margin
body: <p>I can get the height of an element with</p>
  
  <pre><code>HTMLElement.offsetHeight
  </code></pre>
  
  <p>but this is without margin. I can get the height including margin using the function from <a href="https://stackoverflow.com/questions/29547940/find-element-height-including-margin">Find element height, including margin</a>. </p>
  
  <p>But if I have a child element with a bigger margin than parent that function does not give me the height I want. How to I get the height of an element including margin of both the element and child elements?</p>
  
  <p><strong>Related example:</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;
      &lt;p&gt;
        New York
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#inner {
    padding-top: 1px;
    padding-bottom: 1px;
  }
  
  #inner p {
    margin-top: 21px;
    margin-bottom: 100px;
  }
  </code></pre>
  
  <p>If I use <strong>outer.offsetHeight</strong> the height is including the margin of the p-element. But if I remove the 1px padding of inner, then <strong>outer.offsetHeight</strong> disregards the margin of the p-element. Why?</p>