What is CSS Box Model

• All HTML Elements can be considered Boxes.

• CSS Box Model is a Box wrapped around every HTML element.

• It consists of Margin, Padding, Borders and Actual Content.

  

Box Model allows us to add a border around elements and define space between elements

1. Content - Where Text and Images appear.

2. Padding - Transparent and it clears area around the content.

3. Border - Goes around the padding and content.

4. Margin - Transparent and it clears area outside the border.

Let's say, we have a div containing an image.

• Padding is used to give space inside content.

• Border is visible outline of element.

• Margin is used to give space outside an element.