Spacing Palette
Color-code margin / padding / gap by px value on web pages, with a floating menu and badges for intuitive inspection.
As of June 2026, Spacing Palette has 71 users and a 4.50/5 rating from 2 reviews in the Developer Tools category.
Usersup 26.8 percent+26.8%
71
71
Ratingup 12.5 percent+12.5%
4.50
2 reviews
Reviewsup 100.0 percent+100.0%
2
Version
1.1.1
Manifest V3
History
7 snapshotsTracking since Apr 6, 2026.
View as table
| Date | Users | Rating | Reviews | Version |
|---|---|---|---|---|
| Apr 6, 2026 | 56 | 4.00 | 1 | 1.1.1 |
| Apr 19, 2026 | 55 | 4.50 | 2 | 1.1.1 |
| Apr 24, 2026 | 56 | 4.50 | 2 | 1.1.1 |
| May 4, 2026 | 58 | 4.50 | 2 | 1.1.1 |
| May 11, 2026 | 61 | 4.50 | 2 | 1.1.1 |
| May 20, 2026 | 62 | 4.50 | 2 | 1.1.1 |
| May 30, 2026 | 65 | 4.50 | 2 | 1.1.1 |
| Now | 71 | 4.50 | 2 | 1.1.1 |
Permissions & access
- Permissions
- activeTabscriptingcontextMenus
- Host access
- None declared
Screenshots
About
Spacing Palette is a visualization tool that lets developers read every margin, padding, and gap on a web page at a glance. It frees you from opening DevTools and chasing the Styles panel every time you check spacing. Once enabled, the entire page is automatically color-coded, and px numbers are expressed at the center of each overlay. Values are grouped into three families: other even numbers in orange→red, multiples of 8 or 4 (8px grid compliant) in yellow-green→green, and odd numbers in blue→purple. Hovering fades non-matching overlays so target spacing stands out. You can turn the px badges on or off as needed. The floating menu lists each px value with its M / P / G counts. Hovering items in the list highlights the matching overlays, and clicking it scrolls the viewport to the target. If the targets are already visible, the badges animate to highlight the location. You can drag or collapse the menu so it never gets in the way. Use the context menu to toggle the extension, overlay visibility, or the px badges from anywhere on the page. For front-end engineers, UI designers, and QA teams who need precision in layout implementation.
Technical
- Version
- 1.1.1
- Manifest
- V3
- Size
- 35.94KiB
- Min Chrome
- 88
- Languages
- 14
- Featured
- No
Metadata
- ID
- nddamjoenahdklcjapemdgegnbdmjhdi
- Developer ID
- ucfd17ecf1f4c94d06e3f7bd3535104cc
- Developer Email
- [email protected]
- Created
- Dec 17, 2025
- Last Updated (Store)
- Jan 19, 2026
- Last Scraped
- Jun 7, 2026
- Website
- —
- Support URL
- —
- Privacy Policy
- —
Similar extensions
Alternatives to Spacing Palette, ranked by description similarity.
Spacing Trace
Color-code margin / padding / gap by property on web pages, with a floating menu and badges for quick inspection.
161
★ 5.0
CSS Spacing Inspector
Hover to see margin, padding, and gap overlays with pixel values
53
Spacing Inspector
Visualize CSS margins and padding on webpages
430
SpacingJS
Precision spacing measurement tool for web developers and designers. Hold Alt/Option key and hover over elements to measure.
2.0K
★ 4.3
CSS Debugger
DevTools-like CSS debugger with Box Model tooltip
37
Show All Padding & Margins
Highlights margins and padding for all HTML elements in any webpage.
4.0K
★ 4.5
Border Patrol – CSS Debugger & Element Outliner
CSS box model debugger & element outliner for fast UI inspection, layout visualization, and faster frontend development.
304
★ 5.0
CSS Debugger
A CSS debugger with color picker for element borders
82
Data sourced from the Chrome Web Store · last verified Jun 7, 2026.