Vista geral
Codifique cores de margem / preenchimento / intervalo por valor de px em páginas web, com um menu flutuante e selos para inspeção…
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.
Detalhes
- Versão1.1.1
- Atualizado22 de agosto de 2026
- Disponibilizado porKaworu Inoue
- Tamanho35.94KiB
- Idiomas14 idiomas
- Programador
Email
dev_kwr@icloud.com - Não comercianteEste programador não se identificou como comerciante. Para os consumidores na União Europeia, tenha em atenção que os direitos dos consumidores não se aplicam aos contratos entre si e este programador.
Privacidade
Este programador declara que os seus dados
- Não estão a ser vendidos a terceiros, além dos exemplos de utilização aprovados
- Não estão a ser utilizados ou transferidos para fins que não estão relacionados com a funcionalidade principal do item.
- Não estão a ser utilizados ou transferidos para determinar a credibilidade de crédito ou para fins de empréstimo.
