The Box Model

The browser draws every element as a rectangular box made of four layers, from the inside out:

1. Content — the text or image. 2. Padding — space between the content and the border (takes the background color). 3. Border — a line around the padding. 4. Margin — transparent space outside the border, separating the element from its neighbors.

DevTools shows this diagram for any element you inspect.