Gerador de Escala de Espaçamento
O gerador de escala de espaçamento monta um sistema de espaçamento a partir de uma unidade base de 4, 5, 6 ou 8 px em 12, 16 ou 20 etapas e o exporta como propriedades personalizadas de CSS em px ou rem.
Sobre esta ferramenta
O gerador de escala de espaçamento monta um sistema de espaçamento a partir de uma unidade base de 4, 5, 6 ou 8 px em 12, 16 ou 20 etapas e o exporta como propriedades personalizadas de CSS em px ou rem.
Como usar
- Escolha uma unidade base, como 4 px ou 8 px.
- Selecione a saída em px ou rem.
- Escolha quantas etapas você precisa.
- Clique em Copiar variáveis CSS para adicionar a escala à sua folha de estilos.
Bom saber
- O espaçamento do Tailwind CSS é baseado em uma unidade de 4 px (0.25 rem).
- O Material Design usa um grid de 8 dp, com 4 dp para pequenos ajustes.
- Múltiplos como 0.5, 1, 1.5, 2, 3, 4, 6 e 8 cobrem a maioria das necessidades de espaçamento.
- Aqui, os valores em rem consideram um tamanho de fonte raiz de 16 px.
- Uma escala fixa substitui valores arbitrários em pixels e mantém os layouts visualmente consistentes.
Funciona inteiramente no seu navegador — nada do que você digita é enviado ou armazenado.
Perguntas frequentes
Devo usar um sistema de espaçamento de 4px ou de 8px?
8 px é um padrão comum para layouts; 4 px dá um controle mais fino para interfaces densas e componentes pequenos. Muitas equipes usam etapas de 4 px dentro de um ritmo de 8 px.
O que é uma escala de espaçamento em design systems?
Um conjunto predefinido de valores de espaçamento usado em margens, padding e gaps, para que todas as telas usem os mesmos incrementos.
Como uso a escala em CSS?
Copie as variáveis e use-as assim: padding: var(--space-4); para manter o espaçamento consistente entre os componentes.
É o mesmo que o espaçamento do Tailwind?
Com base de 4 px e saída em rem, os valores seguem os mesmos múltiplos da escala de espaçamento padrão do Tailwind.