Guided Notes
The Box Model
Content, padding, border, margin, width and height, box-sizing, and outlines.
Every element is a box
Slide 1 / 5The 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.
