Computed Styles and Box Model Inspector

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?"

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.

Type in the filter box to find specific computed properties quickly. Check "Show all" to include inherited and browser-default properties. Uncheck it to show only non-default properties — the shortest path to relevant applied styles.

Properties shown in gray in Computed are inherited from a parent. Click the inherited property to jump to the element and rule that set it, tracing the cascade without manual parent inspection in the markup.

Writing margin: 16px 8px expands to four computed values: margin-top, margin-right, margin-bottom, margin-left. The Computed panel always shows individual longhand properties — useful for debugging asymmetric spacing issues.

Computed color values are always in rgb() or rgba() format regardless of how they were written. Click a color swatch in the Styles panel to toggle display format (hex, hsl, rgb). The Computed panel always shows the resolved color.

Inspect computed font-size, font-family, line-height, and letter-spacing to verify typography tokens are applied correctly. Browser font fallbacks appear in computed font-family when a requested font fails to load.

box-sizing: border-box makes width include padding and border; box-sizing: content-box (default) excludes them. The box model diagram in DevTools reflects whichever model applies — compare content width to total width to confirm box-sizing behavior.

Vertical margins between block elements collapse to the larger of the two values. The box model diagram shows effective margin — use it alongside Layout Inspector to identify collapsed margins that differ from written values.

The Styles panel shows all rules targeting the element in specificity order. Strikethrough rules are overridden. Finding which rule wins a property dispute: look for the topmost non-strikethrough declaration in the Styles panel.

Browser user-agent stylesheet rules appear at the bottom of the Styles panel labeled "user agent stylesheet." Computed shows their resolved values. Reset these with a CSS reset or Normalize.css to establish a consistent baseline across browsers.

What does the Computed Styles panel show that the Styles panel does not?

The Computed Styles panel and box model diagram reveal the final resolved values of all CSS properties after cascade resolution. Use them to trace inheritance, debug shorthand expansion, investigate box-sizing, and identify which rule wins specificity conflicts on any element.