Retour au cours

Lesson 11: Understanding The Box Model (Conceptual Overview)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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