Space Spector

Visualize all spacing gaps and padding at once — perfect for design review

Space Spector is a lightweight Chrome extension for designers, frontend developers, and QA engineers who need to quickly inspect spacing on any webpage without digging through DevTools. How it works Click Activate — Space Spector overlays color-coded highlights across the entire visible page, showing every gap and padding value at a glance. Features • Show all spacing at once — padding, margins and sibling gaps rendered simultaneously • Filter by layer — toggle Horizontal Padding, Vertical Padding, H Gaps and V Gaps independently • Only Horizontal / Only Vertical — one-click modes to focus on a single axis • Ignore elements — exclude navbars, footers or any selector from the overlay • Dark & Light mode — switch the popup UI to match your workflow • Zero performance impact — overlays are fixed-position and pointer-events are disabled Color legend 🟠 Orange — Horizontal padding (left / right) 🟣 Purple — Vertical padding (top / bottom) 🔴 Red — Horizontal gaps between siblings 🔵 Blue — Vertical gaps between siblings Perfect for design handoff reviews, catching inconsistent spacing before shipping, and verifying designs match their specs.