css - Layout: Box Model

The CSS Box Model is critical for understanding how items are scaled and spaced on a website.

Each element is treated as a box consisting of four main parts:

Content: The actual content inside the element (text, images, etc.).

Padding: Space between the content and the element's border.

Border: Surrounds the padding and content.

Margin: Space outside the border, separating the element from others.

Example:

div {

  width: 300px;

  padding: 20px;

  border: 5px solid black;

  margin: 15px;

}

This defines a box with:

300px width for the content.

20px padding inside the box.

A 5px black border around the element.

15px margin outside the border, creating space around the element.

Box Model Visual:

The box model can be visualized as:

| Margin |

| Border |

| Padding |

| Content |