← Back to Curriculum

Box Model and Layout

📚 Lesson 3 of 16 ⏱️ 30 min

Box Model and Layout

30 min

The CSS Box Model is the foundation of layout on the web. Every element is essentially a rectangular box, composed of four layers: Content, Padding, Border, and Margin.

The **Content** is the actual text or image. **Padding** is the transparent area around the content, inside the border. **Border** wraps the padding and content. **Margin** is the transparent space outside the border, separating the element from its neighbors.

Understanding how these layers interact is vital. For example, the total width of an element is calculated as: Content Width + Padding + Border + Margin. This often confuses beginners.

The `box-sizing: border-box;` property is a game-changer. It changes the calculation so that padding and border are included *within* the specified width, making layout math much more intuitive.

Key Concepts

  • Every element is a box.
  • Layers: Content > Padding > Border > Margin.
  • Margins create space between elements.
  • Padding creates space inside elements.
  • `box-sizing: border-box` simplifies layout.

Learning Objectives

Master

  • The four components of the Box Model
  • Calculating total element size
  • Collapsing margins phenomenon
  • Using `box-sizing` for predictable layouts

Develop

  • Spatial reasoning for web layout
  • Troubleshooting spacing issues
  • Creating consistent spacing systems

Tips

  • Apply `box-sizing: border-box` globally using the universal selector `*`.
  • Use margins for external spacing, padding for internal spacing.
  • Use browser dev tools to visualize the box model.
  • Be aware that vertical margins can collapse.

Common Pitfalls

  • Forgetting that borders add to the element's width.
  • Confusing padding (inside) with margin (outside).
  • Not resetting browser default margins (user agent styles).
  • Assuming height works the same way as width (it's more complex).

Summary

  • The Box Model governs element size and spacing.
  • It consists of content, padding, border, and margin.
  • Mastering it is essential for layout control.
  • Modern CSS resets often include `box-sizing: border-box`.

Exercise

Create a div with a border, padding, and margin.

div {
  border: 1px solid black;
  padding: 20px;
  margin: 10px;
}

Exercise Tips

  • Use browser DevTools to visualize each layer of the box model.
  • Try different border styles (dashed, dotted, double).
  • Experiment with different units (px, em, rem) for padding and margin.
  • Add box-sizing: border-box to see how it affects the total width.

Code Editor

Output