The Box Model

content, padding, border, margin and box-sizing.

Video tutorialTrack course · freeCodeCamp

CSS Full Course — Zero to Hero

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 1 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

5/5

1. 00:00The Box Model. content, padding, border, margin and box-sizing.
2. 00:05Every element is a box: content, then padding, then border, then margin.
3. 00:10By default width only covers the content, which makes layouts hard to predict — set box-sizing: border-box.
4. 00:17Code example (css): *, *::before, *::after { box-sizing: border-box; }…
5. 00:22Try it yourself — edit the sample and run it in the browser.

Every element is a box: content, then padding, then border, then margin. By default width only covers the content, which makes layouts hard to predict — set box-sizing: border-box.

*, *::before, *::after { box-sizing: border-box; }