Understanding the Box Model
Every element in HTML is represented as a rectangular box. The CSS Box Model describes the geometry of that box — its four layers that together determine how much space the element takes up and where it sits on the page.
Margins and Padding
Both properties create space, but they operate in fundamentally different parts of the box model and have different behaviors. Mastering them is essential for precise layout control.
Borders and Outlines
Borders and outlines are both drawn around elements, but they work very differently — especially when it comes to layout impact, accessibility, and the creative possibilities they unlock.
Height, Width, and Sizing
Understanding how CSS determines an element's size — and which sizing keywords to use — is foundational to building layouts that work at every screen size.
CSS Shorthand Properties
Shorthand properties let you set multiple related CSS values in a single declaration. Understanding their exact syntax — especially the order of values — prevents subtle, hard-to-debug bugs.
Margin Collapsing
Margin collapsing is the single most common source of "why isn't my margin working?" confusion in CSS. When two vertical margins meet under certain conditions, they don't add together — the larger one wins and the smaller one disappears. This is not a bug, it's a specified behavior — but it catches everyone off guard.