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
Includes
- The Element
Does Not Include
- Padding
- Border
- Margin
innerHeight
Includes
- The Element
- Padding
Does Not Include
- Border
- Margin
outerHeight
Includes
- The Element
- Padding
- Border
Does Not Include
- Margin
outerHeight(true)
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.