What is the CSS box model?

The box model says every element is rendered as a rectangular box made of four nested layers — content, padding, border and margin — and an element's rendered size is the sum of those layers.

Reading from the inside out:

+-----------------------------+
|          margin             |   space OUTSIDE the box (between boxes)
|  +-----------------------+  |
|  |       border          |  |   the visible frame
|  |  +-----------------+  |  |
|  |  |    padding      |  |  |   space INSIDE the border
|  |  |  +-----------+  |  |  |
|  |  |  |  content  |  |  |  |   the text/image itself (width, height)
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

• content — the actual text or image; this is what width and height describe by default.
• padding — breathing room between the content and the border.
• border — the frame drawn around the padding.
• margin — the gap pushed outside the border, separating this box from its neighbours.

By default the layers add up, so the space an element actually occupies on screen is:

total width = margin-left + border-left + padding-left
            + content width
            + padding-right + border-right + margin-right

(the same formula applies to height). This is the classic surprise for beginners: setting width: 200px does not mean the box is 200px wide once padding and border are added. The box-sizing property (next card) exists precisely to change that arithmetic.

Go deeper:

• CSS box model (Wikipedia) — labelled diagram of the four nested areas, plus the W3C vs IE box-model history.
• Introduction to the box model (MDN) — each area and its properties, including margin collapsing.
• Box Model — Learn CSS (web.dev) — interactive lesson that lets you toggle the layers and watch the size change.