title: Finding HTML element pixel dimensions from Javascript
body: <p>I'm looking for a solid, cross-browser way of finding the following calculated dimensions from Javascript:</p>
  
  <ul>
  <li>content rectangle: innermost content area</li>
  <li>client rectangle: content area + padding </li>
  <li>complete rectangle: content + padding + border + margin</li>
  </ul>
  
  <p>It doesn't have to be exactly that grouping, I'm just looking for enough info to completely decompose any box into content->padding->border->margin segments.</p>
  
  <p>(I probably won't have to care about scroll bars, but if they have a well-defined behaviour as well, I wouldn't mind knowing that)</p>
  
  <p>I want to be able to get these as <em>pixel</em> values, regardless of how they were styled from CSS. So even in the case of e.g. <code>margin-left: auto</code> or <code>width: 50%</code>, I want to be able to extract the computed results in pixels.</p>
  
  <p>No jQuery solutions please, I'm looking for vanilla Javascript + DOM answers.</p>