Spacing Inspector is a free Chrome extension that shows the CSS box model of anything you hover. Measure distances like in Figma, score a page’s spacing grid, and copy what you see as CSS or Tailwind.
Works on every site, whatever it’s built with
The short answer
Spacing Inspector is a free Chrome extension for designers and front-end developers. Hover any element on any website to see its margin, border, padding and gaps with the exact pixel values, then measure, audit and copy that spacing as code.
Features
Each one plays below like a short film. Hover the frame to look closer, or pause it.
Margin, border, padding, content and flex or grid gaps are drawn as separate layers, each labelled with its value on every side. An info card shows the element’s size, its parents and the code.
Hold Alt and hover, or press M. Pink lines show the exact distance between any two elements, including how far one sits from its container’s edges.
Press A. The audit reads every margin, padding and gap, detects the 4px or 8px grid you meant to use, scores the page from 0 to 100 and lists every value that drifted off it, with the fix.
Press C on any element. You get clean shorthand CSS, rem values, or the Tailwind classes that reproduce it, ready to paste into your code.
<button className="mt-8 py-3.5 px-7 border">How it works
<a href="/signup" className="mt-8 py-3.5 px-7">Start free trial</a>Install free from the Chrome Web Store. No account, no setup.
Press Alt+Shift+S, then hover. Margin, border, padding and gaps appear with their values.
Hold Alt to measure between elements. Press A for the page’s spacing score.
Press C to copy CSS or Tailwind, or copy every audit fix at once.
Every action is one key away, so your hands stay where the work is. Press a key: it lights up.
Compared
DevTools is a full toolbox. Spacing Inspector does one job, spacing, and does it faster.
| Feature | Spacing Inspector | Chrome DevTools |
|---|---|---|
| Hover to see spacing, no clicks | No | |
| Margin, padding, border and gap drawn on the page | No | |
| Values labelled on all four sides | No | |
| Distance between any two elements | No | |
| Spacing score for a whole page | No | |
| Copy spacing as Tailwind classes | No | |
| Edit CSS live | No |
FAQ
Everything people ask before they add it.
Spacing Inspector is a free Chrome extension that shows the CSS box model of any element you hover: margin, border, padding, content and flex or grid gaps, with the pixel value on every side. Version 2.0 adds a Figma-style measure tool, a spacing audit that scores a whole page, and one-key copy as CSS, rem or Tailwind.
Yes. Every feature is free, with no account, no trial and no paid tier.
No. It runs entirely in your browser and sends nothing to any server. Your settings sync through your own Chrome profile.
Install Spacing Inspector, open any page and press Alt+Shift+S (or click the toolbar icon). Hover an element: margin shows in blue, padding in green, border in yellow and gaps as purple stripes, each labelled with its value.
Press A to run the Spacing Audit. It reads every margin, padding and gap on the page, detects whether the design uses a 4px or 8px grid, and scores from 0 to 100 how many values sit on it. Every off-grid value is listed with a suggested fix you can copy as CSS.
Yes. Press C on any element to copy its spacing as shorthand CSS, rem values or Tailwind classes such as mt-8 py-3.5 px-7.
It works on any http or https page, including your local dev server. It runs in Chrome and in Chromium browsers that install from the Chrome Web Store, such as Microsoft Edge, Brave and Arc.
Join 858 people who see every margin, padding and gap.
Add to Chrome, it’s free