Get the height of an element minus padding, margin, border widths

Here’s the solution that works for both cases of box-sizing: content-box and border-box.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Works in IE9+

You can use feature detection

if (!getComputedStyle) { alert('Not supported'); } 

This will not work if element’s display is inline. Use inline-block or use getBoundingClientRect.