🔍 Chrome Extension · Free · Any Page

See Every
Margin. Every
Padding. Instantly.

Stop guessing. Stop fighting DevTools. Hover any element and see your CSS box model — visualized, labeled, measured — live.

Install Free Extension See it live ↓
yourwebsite.com — Spacing Inspector Active
margin: 20px
padding: 11px 14px
.nav-button { }
margin: 8px 16px
padding: 12px 18px
.hero-title { }
margin: 32px auto
padding: 16px 24px
.card-wrap { }
BOX MODEL
MARGIN (blue)
Outside spacing
PADDING (green)
Inside spacing
CONTENT
The element
HOVER ANY BOX ↑
Margin (blue)
Padding (green)
↑ Hover boxes
0ms
Detection speed
2
Visual layers
100%
Any website
Free
No account needed
Live Demo

Hover. Inspect.
Understand instantly.

This is exactly what Spacing Inspector looks like on your browser. Hover the element below.

📐
Spacing Inspector — Active ● Live
16px 16px 24px 16px
20px 28px 20px 28px
💬 Subscribe Button
📦 Computed Box Model
MARGIN
PADDING
element content
320 × 48 px
16pxmargin-top
24pxmargin-btm
20pxpad-top
28pxpad-right
20pxpad-btm
margin: 16px 16px 24px
padding: 20px 28px
⚡ getComputedStyle()
Features

Everything you need.
Nothing you don't.

🔵
Blue = Margin
Margins highlighted in blue with dashed borders. Pixel-perfect labels on all four sides. No guessing allowed.
🟢
Green = Padding
Padding highlighted in green. Know exactly how much breathing room sits inside your element — instantly.
⚡
Real-time Detection
Move your mouse, get instant readings. No clicks, no panels, no tab-switching. Purely live inspection.
📐
Pixel Measurements
Exact pixel values on overlay — top, right, bottom, left. No mental math. No unit conversion. Just the number.
📱
Responsive Ready
Resize your browser. Spacing Inspector updates live. Debug responsive layouts without juggling multiple tabs.
🌐
Works Everywhere
E-commerce, dashboards, SaaS apps — activate and it works on any website. Zero config, zero setup, zero BS.
Under the hood

It reads your CSS.
Not an approximation.

Uses the browser's native getComputedStyle() API — the exact same source Chrome DevTools uses. Real values, not guesses.

🟡 JavaScript · Core logic
// Runs on every mouseover event
const styles = getComputedStyle(hoveredElement);
 
// Read all margin values
const margin = {
  top: styles.marginTop, // "16px"
  right: styles.marginRight, // "16px"
  bottom: styles.marginBottom, // "24px"
  left: styles.marginLeft // "16px"
};
 
// Read all padding values
const padding = {
  top: styles.paddingTop, // "20px"
  right: styles.paddingRight, // "28px"
  bottom: styles.paddingBottom, // "20px"
  left: styles.paddingLeft // "28px"
};
 
// Render overlay directly on the element
renderSpacingOverlay(margin, padding, hoveredElement);
Why Spacing Inspector

Better than DevTools
for this job.

DevTools is a powerful hammer. Spacing Inspector is a precision scalpel. Different tools, different jobs.

Feature
⬡ Spacing Inspector
Chrome DevTools
Hover to inspect (no click)
✓
✗
Visual overlay on page
✓
✗
Color-coded margin vs padding
✓
✗
Pixel labels on all 4 sides
✓
✗
No DevTools panel needed
✓
✗
Full DOM inspection
—
✓
Edit CSS live
—
✓
Get started

Up in 60 seconds.

01
🏪
Install the Extension
Click "Add to Chrome." No account. No credit card. No 14-day trial. Just click and it's there.
02
🖱️
Click the Icon
Go to any webpage. Click Spacing Inspector in your toolbar. The cursor changes — you're live immediately.
03
✨
Hover & See Everything
Move your mouse over any element. Blue = margin, green = padding. Pixel numbers appear instantly.
Stop guessing.
Start seeing.

Free Chrome extension. Works on every website. No setup required.

🚀 Add to Chrome — It's Free
🔵 Margin viz
🟢 Padding viz
⚡ Real-time
📐 Pixel-perfect
🌐 Any website
💸 Free forever