The Box Model

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

Below is a diagram of the box model

The Box Model Diagram.

Examples of the Box Model in Action

example 1: Adding a border and padding to the box..

Box 1

example 2: Adding only border/padding to one direction of a box..

Box 2

Eample 3: Shorthand code for padding/margin on a box...

Box 3

In shorthand code, the first number represents top and bottom. The second number represents left and right

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

Box 4

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