Spacing Palette

透過網頁上的 px 值對邊距/填充/間距進行顏色編碼，配有浮動選單和徽章，方便直觀檢查。

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 shown 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, and hovering a row highlights the matching overlays. 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 web designers, front-end engineers, and QA teams who need to audit spacing consistency.