Debugging Layouts with Developer Tools

A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.

Updated

Cheat sheet: Debugging Layouts with Developer Tools
Category
CSS
Level
Journeyman
Tags
Box model, Computed value, CSS, Developer Tools, Outline, Pseudo-class, web-development