The Box Model
Every element on the page is a box with four layers, from inside out:
margin
border
padding
content
content-box vs border-box
Both boxes below are set to width: 300px with padding: 20px and a 3px
border. See the difference:
box-sizing: content-box
width: 300px
+ 40px padding
+ 6px border
= 346px total
+ 40px padding
+ 6px border
= 346px total
Actual rendered width: 346px
box-sizing: border-box
width: 300px total
(padding + border
included)
(padding + border
included)
Actual rendered width: 300px