The Box Model

The box model represents how the browser sees you content. According to the model. contentis 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 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...

Box1

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

Box 2

example 3: shorthand code for padding an margin on a box...

Box3

In shorthand code 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, then right, bottom, left.In other words, clockwise.