Box Model
MDN has a pretty good intro to the box model.
This one should be self explanatory.
Notes
- Read about box-sizing, a CSS property that determines, well, exactly what you need.
- Notice that the margins "collapse" - when the box with
margin: 40px
is next to a box with margin: 20px
, the two boxes render 20 pixels apart. This is because margins don't add together - they dictate the minimum space
the element needs to be spaced from other stuff. MDN has more on this.