The Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content.

This text is the content of the box. We have added a 20px padding (space between text and borders), 50px margin (space outside the borders)and a 15px green border.

This text is the content of the box. We have added a 20px padding (space between text and borders) , 50px margin (space outside the borders)and a 15px grey border.

Therefore, margin is the space outside of a box, while oadding is the spaces inside the box

box.model