CSS Spacing Inspector

About

CSS Spacing Inspector lets you instantly visualize the spacing of any element on any webpage — just hover.

No more opening DevTools and clicking through the box model. Hover over any element and immediately see its margin, padding, and gap values as color-coded overlays rendered directly on the page.

How It Works
1. Click the extension icon to enable inspection
2. Hover over any element — overlays appear instantly
3. Click an element to freeze its overlays in place
4. Click a pixel label to copy the value to your clipboard
5. Press ESC to disable

Features
Color-Coded Overlays
- Orange overlays for margin (outside the element)
- Green overlays for padding (inside the element)
- Blue overlays for gap (between flex/grid children)
- Each overlay displays its pixel value as a label

Gap Visualization Flex and grid containers get special treatment. CSS Spacing Inspector detects row-gap and column-gap and renders blue overlays between child elements, making it easy to see how gap affects layout. Works with single-direction flex, wrapped flex, and CSS Grid.

Click to Copy Click any pixel label to copy the CSS value to your clipboard. A green flash confirms the copy. Perfect for quickly grabbing values to use in your own code.

Inconsistency Detection Enable inconsistency detection to find spacing outliers among sibling elements in flex and grid containers. When one child has different margin or padding than its siblings, a red warning badge appears showing the expected vs. actual value. Great for catching accidental spacing inconsistencies in component libraries and design systems.

Customizable Settings

- Toggle inspection on/off
- Show or hide pixel value labels
- Show or hide gap overlays
- Enable inconsistency detection (per-tab, not persisted)
- Adjust overlay opacity

Built for Performance
- Overlays render at 60fps using requestAnimationFrame
- Shadow DOM isolates extension styles from page styles
- DOM writes are batched for minimal reflow
- Sibling analysis capped at 20 elements to prevent slowdown

Privacy
CSS Spacing Inspector respects your privacy completely:

- No data collection — we collect absolutely no data from you or the pages you visit
- No network requests — the extension never phones home, never contacts any server
- No analytics — no tracking, no telemetry, no usage statistics
- All local — every computation happens entirely in your browser
- No account required — install and use, nothing else needed
- Open source — inspect the code yourself

The only permission used beyond content script injection is storage (to remember your settings like opacity preference) and activeTab (to communicate between the popup and the page).

Who It's For
- Frontend developers debugging layout issues
- Designers verifying spacing matches design specs
- QA engineers checking visual consistency
- Anyone who wants to understand how spacing works on a webpage

Keyboard Shortcuts
- ESC — Disable the inspector
- Click element — Freeze overlays on that element
- Click label — Copy the CSS value to clipboard
- Click elsewhere — Unfreeze and resume hovering

Support
If you find this extension useful, consider supporting development: https://buymeacoffee.com/dyemane