The Box Model

The Box Model represents how the browser sees your content. Accoridng to the model, content is on the inside, padding is used to move content away form the edges of the box, border is used to add an outline to the box, margin is used to move the box around in space.

Below is a diagram of the box model...

The Box Model Diagram

Examples of the Box Model in action

Example 1: Adding border and padding to a box

Box 1

Example 2: Adding only border and padding to one direction of a box...


Example 3: Shorthand code for padding and margin on a box...


In shorthand code the first number represents top and botton and the second number equals left and right.

Example 4: Shorthand code for all sides of a box...

Box 4

In shorthand code, the first number in the top, then right, then bottom, then left. In other words, clockwise.