The Box Model

The box model represents how the browser see your content. According to the model, content is one of the inside, padding is used to move content away from the edges of the box, border is used to ass and outline to 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 border and padding to a box...

Box 1

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

Box 2

Example 3: Shorthand Code for adding a margin on a box

Box 3

In shorthand code, the first number represents top and bottom. The second number represents left and right ( padding: 20px (first number) 0 (second number) )

Example 4: Shorthand code for all sides of a box

Box 4

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