The Secret Mechanisms of CSS
summary
Explains why inline images leave that mysterious gap — browsers treat them like text baseline, so fixes include line-height: 0, vertical-align: bottom, or making the image display block; distinguishes layout modes (flow vs Flexbox vs Grid vs positioned), demonstrates Flexbox’s minimum content size and hypothetical size using input size measured in characters and shows min-width: 0 to force shrinking; details absolute anchoring to the nearest positioned ancestor, fixed anchoring to the viewport, and how stacking context scopes z-index comparisons.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:10Mystery space under images
- 9:50CSS as mini languages
- 12:09Flow layout basics
- 14:50Inline elements explained
- 15:59Inline-block superpower
- 18:39Flexbox primary axis
- 21:25Justify vs align in Flexbox
- 24:09Flexbox minimum content
- 27:31Positioned layout overview
- 28:16Relative positioning
- 29:32Absolute positioning explained
- 32:14Fixed positioning analogy
- 33:19Z-index stacking context
- 38:18Personal CSS journey
- 41:37CSS complexity debate
- 43:53Tailwind CSS thoughts
- 46:42Helping backend devs with CSS
- 49:36Legacy browser support
- 51:10CSS feature wish list
