Box Model in CSS

Introduction

 
We can consider all the elements of HTML as a box. Whenever a designer considers the design and layout the term box model will always become a very important thing.
 
CSS Box model is a box that wraps an HTML element. Main parts of this are:
  1. Borders - Goes around the content and padding
  2. Margin- An area around the border. It is mostly transparent without any background color.
  3. Padding - Clears an area around the content. It is affected by the background color of the box.
  4. Content  - Is the the main area where the main text and images are written.