Skip to main content
FreeToolkit .ai

Gerador de Escala de Espaçamento Gere um sistema de escala de espaçamento consistente com unidade base personalizável e multiplicadores.

Gerador de Escala de Espaçamento illustration
🎨

Gerador de Escala de Espaçamento

Gere um sistema de escala de espaçamento consistente com unidade base personalizável e multiplicadores.

1

Defina a unidade base

Escolha o valor de espaçamento base em pixels (comumente 4px ou 8px).

2

Escolha a unidade de saída

Selecione px ou rem para os valores de espaçamento gerados.

3

Copie as variáveis CSS

Visualize a escala visual e copie as propriedades personalizadas do CSS.

Loading tool...

What Is Gerador de Escala de Espaçamento?

O Gerador de Escala de Espaçamento cria um sistema de espaçamento consistente para design web usando uma unidade base multiplicada por um conjunto pré-definido de fatores. O espaçamento consistente é fundamental para designs profissionais e harmônicos - sem ele, os layouts parecem inconsistentes e pouco refinados. Essa ferramenta usa uma unidade base (tipicamente 4px ou 8px) multiplicada por fatores (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) para gerar uma escala de espaçamento abrangente. A pré-visualização visual mostra cada valor de espaçamento como uma barra colorida, tornando fácil ver as diferenças relativas. A saída é um conjunto de propriedades personalizadas do CSS (--space-0 até --space-24) em px ou rem, prontas para uso como margem, preenchimento, lacuna e outros valores de espaçamento em toda a folha de estilo.

Why Use Gerador de Escala de Espaçamento?

  • Sistema de unidade base para espaçamento matematicamente consistente
  • Gráfico de barras visuais mostrando diferenças relativas de espaçamento
  • Saída de propriedades personalizadas do CSS para integração com o sistema de design
  • Suporta unidades de saída px e rem

Common Use Cases

Tokens do Sistema de Design

Gere tokens de espaçamento como base para um sistema de design.

Espaçamento da Biblioteca de Componentes

Garanta espaçamento consistente em todos os componentes de uma biblioteca.

Configuração do Novo Projeto

Estabeleça um sistema de espaçamento ao iniciar novos projetos web.

Alinhamento da Equipe

Compartilhe uma escala de espaçamento padronizada entre as equipes de design e desenvolvimento.

Technical Guide

Uma escala de espaçamento usa uma unidade base multiplicada por uma série de fatores para criar valores de espaçamento consistentes e proporcionais. As unidades base mais comuns são 4px (usadas pelo Tailwind CSS e Material Design) e 8px (usadas por muitos sistemas de design). Uma unidade base de 4px cria um controle fino: 4, 8, 12, 16, 20, 24, 32, 40, etc. Uma unidade base de 8px cria saltos maiores: 8, 16, 24, 32, 40, 48, etc. As propriedades personalizadas do CSS (variáveis) armazenam os valores para reutilização: --space-1: 0,25rem. Essas podem ser usadas em margem, preenchimento, lacuna e qualquer outra propriedade de espaçamento. Usar unidades rem garante que o espaçamento seja escalado com o tamanho da fonte raiz, mantendo as proporções quando os usuários alteram o tamanho do texto. O passo meio (0,5x) fornece um incremento menor para ajustes finos. Multiplicadores grandes (16x, 20x, 24x) lidam com espaçamento de seção e lacunas grandes de layout.

Tips & Best Practices

  • 1
    Use base de 4px para controle fino, 8px para escala mais simples
  • 2
    Aplique unidades rem para espaçamento acessível e escalável
  • 3
    Use propriedades personalizadas do CSS para ajustes globais fáceis de espaçamento
  • 4
    Mantenha os valores da escala - evite espaçamento arbitrário para consistência

Related Tools

Ambiente de Testes do CSS Grid - free online tool

Ambiente de Testes do CSS Grid

Construtor visual de CSS Grid com controles interativos para colunas de modelo, linhas e lacunas.

🎨 CSS & Design
Gerador de Configuração do Tailwind - free online tool

Gerador de Configuração do Tailwind

Gere arquivos de configuração do Tailwind CSS com cores personalizadas, fontes e pontos de quebra.

🎨 CSS & Design
Gerador de Escala Tipográfica - free online tool

Gerador de Escala Tipográfica

Gere uma escala tipográfica modular com tamanho base, razão e unidades personalizáveis.

🎨 CSS & Design
Gerador de Variáveis CSS - free online tool

Gerador de Variáveis CSS

Gere propriedades personalizadas do CSS (variáveis) para cores, espaçamento e tipografia.

🎨 CSS & Design

Frequently Asked Questions

Q Qual tamanho base devo usar?
4px é o mais popular (usado pelo Tailwind). 8px fornece uma escala mais simples e restritiva.
Q Devo usar px ou rem?
rem é preferido para acessibilidade, pois se ajusta às preferências de tamanho de fonte do usuário.
Q Por que não usar valores de espaçamento arbitrários?
Uma escala consistente cria harmonia visual e torna os designs mais polidos e profissionais.
Q Como uso esses valores de espaçamento?
Use as propriedades personalizadas do CSS para margem, preenchimento, lacuna: margem: var(--space-4);
Q Posso modificar o conjunto de multiplicadores?
O conjunto padrão cobre a maioria das necessidades, mas você pode adicionar ou remover multiplicadores editando o CSS gerado.

About This Tool

Gerador de Escala de Espaçamento is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.