Blog

It's a Wonderful Life

Difference between height, innerHeight and outerHeight

2019-05-27 22:52 Posted in Learn with JavaScript , jQuery

I was surprised to find there is no simple online comparison giving an overview of the difference between JQuery’s height, innerHeight and outerHeight. It’s really quite simple and is down to whether the calculation factors in padding, border and margin.

Here’s the summary:

  Padding Border Margin
height N N N
innerHeight Y N N
outerHeight Y Y N
outerHeight(true) Y Y Y

The same applies to width, innerWidth and outerWidth