The CSS Box Model

Definition: Every element is a rectangular box with four layers: the content, padding (space inside, around the content), border, and margin (space outside, between boxes). Understanding this is the key to all layout.

From inside out

• padding — cushion inside the border
• border — the line around the box
• margin — gap outside the border, pushing other boxes away

Example

.box {
  padding: 20px;   /* space inside */
  border: 3px solid #2965f1;
  margin: 15px;    /* space outside */
}

Increase the padding and the box grows around its text. Increase the margin and the gap to neighbouring boxes grows.

💡 Remember: padding is inside, margin is outside. Mixing them up is the most common beginner confusion.