Spacing Inspector

See margin, padding, border and gaps on any page. Measure distances, audit spacing and copy as CSS or Tailwind.

Spacing Inspector shows the margin, border, padding and gaps of anything you hover, on any website. No DevTools, no clicking through panels: turn it on and see the spacing, with the exact value on every side. Version 2.0 adds a Figma-style Measure tool, a Spacing Audit that scores a page from 0 to 100, and one-key copy as CSS, rem or Tailwind. INSPECT THE BOX MODEL • Hover any element to see margin (blue), border (yellow), padding (green), content and flex or grid gaps (purple stripes) • Values on all four sides, right on the page • An info card with size, display type, parent elements, a box-model diagram and the spacing as code • Click to pin an element; use the arrow keys to move to its parent, first child or siblings • 4px or 8px grid overlay MEASURE DISTANCES (NEW) • Hold Alt, or press M, and hover: see the distance in pixels between any two elements • Inside another element? See the distance to each edge • Pin measurements and press Shift+C to copy them as a written spec SPACING AUDIT (NEW) • Press A to scan every margin, padding and gap on the page • Detects whether the page uses a 4px or 8px grid, or pick one • Get a score from 0 to 100 and a chart of the page's real spacing scale • Every off-grid value is listed with a suggested fix, such as "padding 13 → 12" • Copy all fixes as CSS or export a JSON report COPY AS CODE (NEW) • Press C on any element to copy its spacing as shorthand CSS, rem values or Tailwind classes (for example mt-8 py-3.5 px-7) MADE FOR SPEED • Alt+Shift+S turns it on or off on any page (change it in chrome://extensions/shortcuts) • I, M and A switch between Inspect, Measure and Audit • Toolbar on the page so you can switch modes without opening the popup • Color presets (Classic, DevTools, Neon, High contrast), custom layer colors, dark or light panels PRIVATE BY DESIGN • Free, no account, no ads • Collects no data and sends nothing to any server: everything runs in your browser • Works on any http or https page, including localhost Great for designers checking a build against the design, front-end developers fixing layout bugs, and anyone doing design QA. Website: https://spacinginspector.netlify.app/