Back to course

Lesson 11: Understanding The Box Model (Conceptual Overview)

CSS Mastery: From Zero to Hero in 100 Lessons

11. Understanding The Box Model (Conceptual Overview)

Every HTML element, regardless of whether it's an image, a heading, or a division, is treated by the browser as a rectangular box. Understanding this Box Model is the single most critical concept in CSS layout.

The Four Components

Working from the inside out, the Box Model consists of four layers:

  1. Content: The actual text, image, or media within the element. This is where width and height properties initially apply.
  2. Padding: The transparent space immediately surrounding the content. It pushes the border out from the content.
  3. Border: The edge or frame surrounding the padding and content.
  4. Margin: The transparent space outside the border. It pushes other elements away from the current box.

mermaid graph TD A[Margin: External Spacing] --> B(Border: The Edge) B --> C(Padding: Internal Spacing) C --> D(Content: Text/Image)

Why is this Important?

If your element has a defined width of 200px, adding 10px of padding and a 2px border will increase the total space the element takes up on the screen (unless you change the box-sizing, which we'll cover soon).

Total Width = Margin + Border + Padding + Content Width