Follow along in your browser: https://codepen.io/TurbineThree/pen/K...
Code in GitHub: https://github.com/RoyChng/CSS-Box-Mo...
🔗 Other resources mentioned:
Border style documentation: https://developer.mozilla.org/en-US/d...
🎥 Description:
In this CSS Box Model Tutorial, we look at why it is necessary and its various components being the content, padding, border and margin. Each section is illustrated with animations and we also work through real-world examples so you'll know when to use what.
We also take a look at concepts related to the box model, such as the box-sizing property in CSS, as well as the CSS reset, which both play an important role in helping ensure consistency and prevent unexpected results!
⏰ Timestamps:
00:00 - Intro
00:22 - Part 1) Content
00:57 - Part 2) Padding
08:57 - Part 3) Border
15:43 - Part 4) Margin
18:12 - Recap of Box Model
19:53 - Box Sizing in CSS
23:06 - CSS Reset