title: How to get the dimensions of a DOM element, minus border and padding?
body: <p>How can I get the size of the content-box of a <code>&lt;div&gt;</code> (or any other element) using <strong>pure JavaScript</strong>? By content-box, I don't mean the size of text inside the div, I mean the element's on-screen size minus border and padding.</p>
  
  <p><img src="https://i.stack.imgur.com/ONehW.png" alt="An element&#39;s bounding boxes"></p>
  
  <p>This is what I see in Chrome Dev Tools. I want just the blue part (720 x 540) in JavaScript. My problem with <code>offsetHeight</code> and company is that they return the dimensions of the black solid rectangle in the graphic (it's hard to see -- between margin and border).</p>
  
  <p>Note that the <code>width</code> and <code>height</code> CSS properties may or may not be set; I want the dimensions regardless. Further note that padding and border may or may not be consistent (it might have only one border, for example).</p>