The Box Model

Every element is a box

From the inside out:

1. Content: the text or image
2. Padding: space between content and border
3. Border: the line around it
4. Margin: space between this box and others

Try it: drag the sliders

The one line every project starts with

* { box-sizing: border-box; }

With the default (content-box), width: 300px plus padding: 20px makes a box 340px wide, which surprises everyone. border-box makes width mean "the whole box". Almost every professional stylesheet starts with this line.

Shorthand

padding: 10px;              /* all four sides */
padding: 10px 20px;         /* top+bottom, left+right */
padding: 5px 10px 15px 20px; /* top, right, bottom, left (clockwise) */
margin: 0 auto;             /* no top/bottom margin, center horizontally */