Présentation
Codez par couleur la marge / le remplissage / l'espacement par valeur px sur les pages Web, avec un menu flottant et des badges…
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.
Détails
- Version1.1.1
- Dernière mise à jour22 août 2026
- Proposé parKaworu Inoue
- Taille35.94KiB
- Langues14 langues
- Développeur
E-mail
dev_kwr@icloud.com - Non-professionnelCe développeur ne s'est pas identifié comme professionnel. Pour les consommateurs de l'Union européenne, veuillez noter qu'il est possible que les droits des consommateurs ne s'appliquent pas aux contrats entre vous et ce développeur.
Confidentialité
Ce développeur déclare que vos données :
- Ne seront pas vendues à des tiers en dehors des cas d'utilisation approuvés.
- Ne seront ni utilisées ni transférées à des fins sans rapport avec la fonctionnalité de base de l'article.
- Ne seront ni utilisées ni transférées pour déterminer votre solvabilité ou en vue de vous proposer un prêt.
