Margins behaviour

In notebook:
FrontEndMasters Advanced JS fundamentals
Created at:
2015-10-01
Updated:
2015-12-27
Tags:
css JavaScript Fundamentals jQuery libraries
Learn JS Fundamentals to jQuery & Pure DOM Scripting DOM Layout & Positioning

Vertical margins collapse, horizontal margins add up ( box-sizing: content-box; )
Horizontal dimensions are calculated first then vertical

​.offsetHeight​ and ​offsetWidth​ is from border to border (outside)
​.clientWidth​ and ​.clientHeight​ is content + padding

no property for just the content's width/height!

jQuery can calculate that and it gives:

  • ​width()​ -> just the content's width without padding, etc.
  • ​innerWidth()​ -> basically same as ​clientHEight​
  • ​outerWidth()​ -> ​.offsetHeight​ 
  • ​outerWidth(true)​ -> with the ​true​ parameter it includes the margin into the calculation