Understanding the Box Model in a Practical Way

Every element on a web page is rendered as a rectangular box. Each box consists of four parts:

• Content: the actual text or elements;
• Padding: space inside the element;
• Border: surrounds the content and padding;
• Margin: space outside the element.

Visual Structure

Margin → Border → Padding → Content. The total size of an element depends on all these parts.

Content

The visible part of the element: text, images, or other elements.

Padding (Inner Space)

Creates space between content and border.

.box {
  padding: 20px;
}

Shorthand

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margin (Outer Space)

Creates space between elements.

.box {
  margin: 20px;
}

Shorthand

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Border

Defines the edge of the element.

.box {
  border: 4px solid darkblue;
}

Key Difference

• Padding → inside space (affects background);
• Margin → outside space (does NOT affect background).

Box Sizing

Controls how width and height are calculated.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border added to size;
• border-box: everything included in size.

In real projects, border-box is preferred.