Visualizador de espaçamento/preenchimento
Visualize como as dimensões de preenchimento, margem, borda e caixa interagem usando um diagrama de modelo de caixa CSS codificado por cores e visualização ao vivo. Ajuste valores em tempo real e exporte classes de utilitários CSS ou Tailwind abreviados instantaneamente - roda inteiramente em seu navegador sem necessidade de inscrição.
Adjust padding, margin, border, and box dimensions using the controls below. The diagram and live preview update instantly - then copy the generated CSS or Tailwind classes.
Applied to all spacing values
Box Dimensions
Padding
Margin
Box Model Diagram
Live Preview
Por que usar nosso visualizador de espaçamento/preenchimento?
- Visualização instantânea ao vivo: nosso visualizador de espaçamento/preenchimento atualiza o diagrama do modelo de caixa e a visualização ao vivo em tempo real à medida que você ajusta os valores - sem necessidade de cliques em botões. Veja exatamente como o preenchimento, a margem e a borda interagem antes de escrever uma única linha de CSS.
- Seguro e privado - sem upload: o visualizador de espaçamento/preenchimento é executado inteiramente em seu navegador usando JavaScript do lado do cliente. Nenhum dado é enviado para nenhum servidor - seus experimentos de layout e CSS gerado permanecem completamente privados em seu dispositivo.
- Saída CSS e Tailwind: Gere classes de utilitários CSS simples e Tailwind CSS a partir de seus valores de espaçamento instantaneamente. O visualizador de espaçamento/preenchimento produz CSS abreviado sempre que possível e mapeia valores para a escala Tailwind mais próxima - pronto para colar em seu projeto.
- 100% gratuito - sem limites: use o visualizador de espaçamento/preenchimento totalmente gratuito, sem inscrição, sem assinatura e sem limites de uso. Ajuste valores, copie CSS e experimente layouts de modelos de caixa quantas vezes precisar - para sempre grátis, sem anúncios.
O que é o modelo de caixa CSS?
O modelo de caixa CSS é o conceito básico de layout que descreve como cada elemento HTML é renderizado como uma caixa retangular com quatro camadas distintas: conteúdo, preenchimento, borda e margem. Compreender como essas camadas interagem é essencial para um trabalho preciso de layout CSS. Nosso visualizador de espaçamento/preenchimento renderiza um diagrama codificado por cores de todas as quatro camadas simultaneamente, facilitando a visualização exata de como seus valores afetam o tamanho total renderizado e o espaçamento de qualquer elemento. Esteja você depurando problemas de layout ou construindo um sistema de design, o visualizador de espaçamento/preenchimento on-line fornece feedback visual instantâneo sem escrever nenhum código.
Como funciona nosso visualizador de espaçamento/preenchimento
- Defina seus valores: insira valores de preenchimento, margem, borda e dimensão de caixa usando os controles. Escolha sua unidade preferida (px, rem, em ou%) e o diagrama será atualizado instantaneamente.
- Leia o diagrama e visualize: O diagrama do modelo de caixa codificado por cores mostra todas as quatro camadas com valores rotulados. A visualização ao vivo renderiza a caixa real com o CSS exato aplicado para que você possa ver o resultado visual real.
- Copie seu CSS ou Tailwind: A ferramenta gera classes de utilitários CSS e Tailwind abreviados a partir de seus valores automaticamente. Copie qualquer saída diretamente em seu projeto - sem necessidade de conversão manual.
O que o visualizador mostra
- Margem (laranja): A camada mais externa – espaço entre este elemento e seus vizinhos. A margem é transparente e não afeta a cor de fundo do elemento.
- Borda (vermelho-laranja): A borda visível do elemento. A largura da borda, o estilo (sólido, tracejado, pontilhado) e o raio da borda são todos configuráveis.
- Preenchimento (verde): Espaço entre a borda e o conteúdo. O preenchimento herda a cor de fundo do elemento e aumenta a área clicável.
- Conteúdo (azul): A área mais interna onde o texto e os elementos filhos são renderizados. A largura e a altura controlam as dimensões da caixa de conteúdo.
Privacidade e segurança de dados
O visualizador de espaçamento/preenchimento processa todos os cálculos e renderizações localmente em seu navegador usando JavaScript. Nenhum valor de espaçamento, saída CSS ou dados de sessão são transmitidos para qualquer servidor externo. Isso torna a ferramenta totalmente privada e segura para uso em qualquer fluxo de trabalho de desenvolvimento ou design.
Perguntas frequentes
Um visualizador de espaçamento/preenchimento é uma ferramenta que permite ajustar o preenchimento CSS, a margem, a borda e as dimensões da caixa e ver o resultado em uma visualização ao vivo e um diagrama de modelo de caixa codificado por cores. Nosso visualizador de espaçamento/preenchimento baseado em navegador também gera classes de utilitário CSS e Tailwind abreviadas - sem necessidade de inscrição.
O preenchimento é o espaço entre o conteúdo de um elemento e sua borda – ele herda a cor de fundo. Margem é o espaço fora da fronteira entre o elemento e seus vizinhos – é sempre transparente. O visualizador de espaçamento/preenchimento mostra ambos em cores distintas.
A ferramenta suporta px, rem, em e%. Selecione sua unidade preferida no menu suspenso Unidade e todos os valores de espaçamento usarão essa unidade na saída CSS gerada.
O visualizador de espaçamento/preenchimento mapeia valores de px para a escala de espaçamento CSS do Tailwind mais próxima. Valores não padrão são gerados como valores arbitrários usando sintaxe de colchetes (por exemplo, p-[18px]). A saída do Tailwind funciona melhor com unidades px.
Sim. A ferramenta gera automaticamente CSS abreviado quando possível - preenchimento: 16px quando todos os lados são iguais, preenchimento: 16px 24px quando superior/inferior e esquerda/direita correspondem, e valores individuais somente quando todos os quatro lados diferem.
Sim. Cada lado tem seu próprio campo de entrada. Use "Aplicar topo a todos" para definir todos os quatro lados com o mesmo valor ou "Limpar tudo" para redefinir todos os lados para zero.
Sim. Todos os cálculos são executados inteiramente no seu navegador. Nenhum valor de espaçamento, saída CSS ou dados de sessão são transmitidos para qualquer servidor.
Sim. A ferramenta oferece suporte a estilos de borda sólida, tracejada, pontilhada e sem borda, largura de borda configurável e raio de borda em pixels - tudo refletido na visualização ao vivo e no CSS gerado.
Sim. O visualizador de espaçamento/preenchimento é 100% gratuito, sem necessidade de inscrição, assinatura ou pagamento. Não há recursos premium ou opções bloqueadas – tudo é gratuito para sempre.