Spacing Inspector
See every margin and every padding, the moment you hover.
Designed, built and grown by Dakshesh B, full-stack developer in Bangalore.
850+
users on Chrome
- users on Chrome
- 850+
- users on Chrome
- on Google for "spacing inspector"
- #2
- on Google for "spacing inspector"
- Google impressions
- 3,474
- Google impressions
- click rate
- 4.3%
- click rate
Overview
What is Spacing Inspector?
Spacing Inspector is a free Chrome extension that visualises CSS margins in blue and padding in green directly on any webpage. Hover any element and it reads the real values through the browser's getComputedStyle API, the same source Chrome DevTools uses, then labels all four sides in pixels. No clicks, no panels and no tab switching. 850+ developers and designers use it, and it ranks #2 on Google for its name.
Features
What Spacing Inspector does
- 01
Hover to measure
Move your mouse over any element to instantly read its margin and padding in pixels.
- 02
Colour-coded overlay
Margins show in blue with dashed borders and padding in green, so the box model reads at a glance.
- 03
All four sides
Exact values for top, right, bottom and left for every element you inspect.
- 04
Real computed values
Reads getComputedStyle, the same source DevTools uses, so the numbers match what the browser renders.
- 05
Responsive ready
Measurements update live as you resize the browser, so you can check spacing across breakpoints.
For engineers and recruiters
How I built it
Tech stack
- Chrome MV3
- Vanilla JavaScript
- getComputedStyle
- CSS overlays
FAQ
Spacing Inspector questions
- Is Spacing Inspector free?
- Yes. It is free forever with no account and no trial.
- How do I use Spacing Inspector?
- Install it from the Chrome Web Store, click the toolbar icon and hover any element on the page.
More products
Hiring a developer in Bangalore?
I am open to full-time Full-Stack, Frontend and SEO Engineer roles, and ready to relocate anywhere. I also take on a few freelance projects.