Chapter 1CSS · Theory
Box Model
Every HTML element is treated as a rectangular box made up of four layers: content, padding, border, and margin.
The CSS box model is the system the browser uses to calculate how much space each element takes up. Working from the inside out, the layers are: the content area (where your text or image goes), padding (space between the content and the border), border (a visible line around the element), and margin (space outside the border that pushes other elements away).
box-sizing: content-box (default) — the width and height you set apply only to the content area. Padding and border are added on top of that. So a 200px element with 20px padding on each side is actually 240px wide on screen.
box-sizing: border-box — the width and height you set include the padding and border. A 200px element stays 200px no matter what padding you add. This is almost always what you want. Apply it everywhere with: *, *::before, *::after { box-sizing: border-box; }.
Margin collapsing: when two block elements are stacked vertically, their margins don't add together — the browser takes the larger of the two. This does not happen with children of a flex or grid container.
┌──────────────────────────────────┐ │ margin │ │ ┌────────────────────────────┐ │ │ │ border │ │ │ │ ┌──────────────────────┐ │ │ │ │ │ padding │ │ │ │ │ │ ┌────────────────┐ │ │ │ │ │ │ │ content │ │ │ │ │ │ │ └────────────────┘ │ │ │ │ │ └──────────────────────┘ │ │ │ └────────────────────────────┘ │ └──────────────────────────────────┘