jQuery: What’s the difference between height, innerHeight and outerHeight?

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
innerHeight
outerHeight
outerHeight(true)

The same applies to width, innerWidth and outerWidth

Resources

Tim Bennett is a web designer and developer. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.