CSS Box Model

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

Components of the Box Model

Content

The content of the box, where text and images appear.

Padding

Clears an area around the content. The padding is transparent.

Border

A border that goes around the padding and content.

Margin

Clears an area outside the border. The margin is transparent.

CSS
div {
  width: 300px;
  padding: 10px;
  border: 5px solid gray;
  margin: 20px;
}

Box Sizing

The box-sizing property defines how the width and height of an element are calculated.

CSS
/* Default behavior */
box-sizing: content-box;

/* Include padding and border in the element's width and height */
box-sizing: border-box;

Your Task

Create a layout with multiple boxes:

1. Create at least three div elements with different content
2. Apply different padding, margin, and border to each
3. Use box-sizing: border-box on one of them
4. Add background colors to help visualize the boxes