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
.
Improved Dan's code to work on inline elements as well (using offset*
instead of client*
):
var cs = getComputedStyle(element);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;