Computed Styles and Box Model Inspector
Use the Computed panel and box model diagram to understand exactly which styles apply to an element.
The Computed Styles Panel
Chrome DevTools → Elements → Computed tab shows the final, computed value of every CSS property on the selected element after cascade, inheritance, and specificity resolution. It answers "what is actually applied?" rather than "what was written?"
Box Model Diagram
The Computed panel displays an interactive box model diagram showing content, padding, border, and margin dimensions for the selected element. Click any dimension to highlight the CSS rule that set it and jump to the Styles panel.
All lessons in this course
- Computed Styles and Box Model Inspector
- Layout Inspector for Flexbox and Grid
- CSS Overview Panel
- Animations and Transitions Debugger