Box Model

Margin and Padding

Both properties accept one to four values, going clockwise from the top.

Code	Meaning
`padding: 20px;`	All four sides
`padding: 10px 20px;`	Top/bottom 10, left/right 20
`padding: 10px 20px 30px;`	Top 10, left/right 20, bottom 30
`padding: 10px 20px 30px 40px;`	Top, right, bottom, left
`padding-top: 10px;`	One side only

Centring a box

.container {
  max-width: 1100px;
  margin: 0 auto;  /* auto left/right margins centre it */
  padding: 0 16px;
}

Margin collapsing

When two vertical margins meet, they collapse into one: the bigger one wins. A margin-bottom: 20px followed by margin-top: 30px gives 30px, not 50px.