DevTools Tips

Highlight the effect of individual CSS properties on hover

Categories: Supported by:

How do certain CSS properties apply to the page isn't always an easy question to answer.

While some properties might be considered simple, others have complex effects that depend on other factors. Properties like justify-content or gap depend on writing and layout direction for example.

Edge and Chrome help with this by highlighting the effect that individual CSS properties have in the page. This doesn't work with all properties, but does work with margin, padding, border, justify-content, align-items, gap.

GIF animation showing a flex layout in the page, and the cursor moving over various properties in the Styles pane