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 edfes of the box,lborder is used o add an outline to the box, margin is sused to move the box around in space

Below is the 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 d Adding only border/padding to me direction of the box..

Box 2

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

Box 3

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

example4: Shorthand code for all sides of the box...

Box 4

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