mike.zarandona.com

coffee lover, dog person, frontend engineer

Height vs innerHeight vs OuterHeight

Posted May 1st, 2016 in JavaScript tagged Layout


This is more of a brain-dump for myself than anything, but if this visual representation of the box model helps you when working with these commonly-named and often-confused methods I’ll consider this article a huge win. Writing this out properly has spurred on a fun little clickable CSS box model on CodePen.

Oh, and even though I’ve expressly written about heights in this article, the same principals apply to width, innerWidth, outerWidth, and outerWidth(true).

height

height

Includes

  • The Element

Does Not Include

  • Padding
  • Border
  • Margin

innerHeight

innerHeight

Includes

  • The Element
  • Padding

Does Not Include

  • Border
  • Margin

outerHeight

outerHeight

Includes

  • The Element
  • Padding
  • Border

Does Not Include

  • Margin

outerHeight(true)

outerHeightTrue

Includes

  • The Element
  • Padding
  • Border
  • Margin

Hopefully this helps someone remember the difference between these similarly named methods. I’ve worked with them so frequently in crafting CSS animations that I’ve just about committed them to memory (and posting about them doesn’t hurt, either). Just remember, happiness is a border-box reset.