CSS Box Model

CSS Box model is used when it comes to understanding Layout and Design.

This model wraps every HTML element

It contains :

• margins: spacing from outside of border (brown area)

• borders: it covers padding and content (yellow area)

• padding: some spacing from content(its child) (green area)

• content : It contains content like text, image or anything (Blue area)

It have some default values predefined. We can modify or provide what we like to achieve using CSS

div h1 h3 {
  border: 25px solid red;
  padding: 40px;
  margin: 30px;
  width: 180px;
}