Visualizador de modelo de caixa CSS

Como usar

1. Insira os valores do modelo de caixa : defina margem, borda, padding e dimensões do conteúdo nos campos ou nos controles deslizantes interativos.
2. Explore a visualização : o diagrama clássico de caixas aninhadas é atualizado em tempo real, margem (laranja), borda (amarelo), padding (verde) e conteúdo (azul), todos claramente rotulados.
3. Copie o CSS : clique em Copiar o CSS para obter as propriedades completas do modelo de caixa do elemento configurado.

Por que usar o visualizador do modelo de caixa CSS ?

O modelo de caixa CSS é um dos conceitos mais fundamentais do layout web, e uma das fontes de bugs mais comuns, especialmente ao misturar valores de box-sizing, fusão de margens e dimensionamento de bordas. Este visualizador interativo torna o modelo de caixa concreto e tangível : você ajusta os valores e vê imediatamente como margem, borda e padding se empilham em torno do conteúdo. Essencial para aprender, depurar e ensinar CSS.

Funcionalidades

• Diagrama interativo : a vista clássica do modelo de caixa aninhado com camadas codificadas por cor (margem, borda, padding, conteúdo).
• Alternância box-sizing : alterne entre content-box e border-box para ver como cada modo afeta as dimensões totais.
• Lados individuais : defina os valores superior/direita/inferior/esquerda independentemente para margem, padding e borda.
• Cálculo do tamanho total : exibe a largura e a altura totais calculadas do elemento.
• Saída CSS : gera CSS pronto para uso para o modelo de caixa configurado.

Perguntas frequentes

Qual a diferença entre content-box e border-box ?

Com content-box (padrão), width e height se aplicam apenas à área de conteúdo, padding e borda se somam ao tamanho total do elemento. Com border-box, width e height incluem padding e borda, tornando os tamanhos mais previsíveis. A maioria dos CSS resets modernos aplica box-sizing: border-box a todos os elementos.

O que é a fusão de margens ?

Quando duas margens verticais se tocam (entre elementos block adjacentes ou entre pai e primeiro/último filho), elas se fundem em uma única margem igual ao maior dos dois valores. Isso não ocorre com filhos flex ou grid, nem com elementos que têm padding ou bordas.

Como remover o espaço extra abaixo dos elementos inline ?

Os elementos inline (como <img>) têm um pequeno espaço abaixo deles causado pelo alinhamento da linha de base do line-height. Corrija-o colocando display: block no elemento, ou vertical-align: bottom, ou font-size: 0 no pai.

O que o modelo de caixa CSS realmente define

O modelo de caixa CSS é a representação retangular de cada elemento em uma página web. Cada elemento tem quatro caixas concêntricas: a caixa de conteúdo (onde texto, imagens, elementos filhos vivem), a caixa de padding (espaço entre o conteúdo e a borda, dentro do limite visível), a caixa da borda (o contorno visível desenhado ao redor do padding) e a caixa de margem (espaço transparente fora da borda que separa este elemento de seus vizinhos). O tamanho visível total de um elemento é conteúdo + padding + borda; a margem é invisível mas empurra outros elementos para longe.

O conceito crítico é box-sizing. Por padrão (box-sizing: content-box, o valor da especificação CSS 1), as propriedades width e height aplicam-se apenas à caixa de conteúdo. Se você definir width: 200px; padding: 20px; border: 2px solid, a largura total renderizada é 200 + 40 + 4 = 244 pixels. Isso é contraintuitivo: um elemento «de 200px de largura» na verdade ocupa 244 pixels de espaço horizontal. A alternativa box-sizing: border-box (adicionada no CSS 3) inverte isso: a propriedade width é o tamanho visível total incluindo padding e borda, então a área de conteúdo encolhe para caber. border-box é o que a maioria dos desenvolvedores esperam; tornou-se o padrão de facto via reset CSS «* { box-sizing: border-box }» de Paul Irish em 2012.

Entender o modelo de caixa importa porque bugs de layout quase sempre rastreiam à confusão sobre qual valor se aplica a qual caixa. «Por que meu elemento é mais largo do que defini?» é surpresa de content-box. «Por que minha margem não empurra os irmãos para baixo?» geralmente é colapso de margens. «Por que padding-top: 50% se comporta estranho?» é porque padding percentual é calculado relativo à largura do pai, não à altura. Cada desenvolvedor CSS encontra essas confusões; este visualizador as torna concretas deixando você ajustar valores e ver a geometria de caixa resultante em tempo real.

Como esta ferramenta funciona nos bastidores

O diagrama interativo é uma série de divs coloridos aninhados correspondentes a cada caixa (margem em laranja, borda em amarelo, padding em verde, conteúdo em azul). À medida que você altera os valores de entrada, JavaScript atualiza os atributos style em linha dos divs do diagrama para que eles reflitam os valores numérica e visualmente. As proporções são escaladas para caber na área de pré-visualização; valores de pixel absolutos empurrariam o diagrama para fora da tela para entradas típicas.

O cálculo do tamanho total depende do modo box-sizing. Para content-box: largura total = largura do conteúdo + padding-left + padding-right + border-left + border-right. Para border-box: largura total = o valor de width (padding e borda são subtraídos da área de conteúdo). A ferramenta calcula ambos os modos simultaneamente quando você alterna box-sizing, então você pode comparar diretamente.

A saída CSS gerada usa suas entradas como valores de propriedade: box-sizing: border-box; width: 200px; padding: 10px 20px; border: 2px solid; margin: 1rem auto;. Copie isso diretamente para sua folha de estilo e aplique a classe correspondente. Nada sai do seu navegador; tudo roda localmente em JavaScript. Sem analytics, sem backend, sem conta. Atualize e o estado se vai.

Breve história do modelo de caixa CSS

• CSS 1 especifica content-box, 1996.A recomendação CSS 1 (dezembro de 1996) define o modelo de caixa W3C: largura aplica-se apenas ao conteúdo, padding e borda adicionam ao tamanho total. Isto torna-se o padrão, mas Internet Explorer 4 e 5 implementam um modelo alternativo onde a largura inclui padding e borda (similar ao border-box de hoje).
• Modo quirks do IE e a Guerra do Modelo de Caixa, 1997 a 2001.IE 4 (1997) e IE 5 vêm com seu modelo de caixa não padrão; IE 6 (2001) introduz «modo padrões» acionado por uma declaração doctype que muda para o modelo de caixa W3C. A discrepância cria anos de bugs de layout entre navegadores e o conhecimento «modo quirks vs modo padrões» que todo desenvolvedor web deve aprender até 2010.
• Reset CSS e folha de estilo clássica de Eric Meyer, 2007.Eric Meyer publica o reset CSS canônico (maio de 2007) que define margens, paddings e outros padrões a zero em todos os elementos. Torna-se prática padrão para estilo previsível entre navegadores. O reset não trata diretamente box-sizing mas normaliza o caos em torno dos padrões herdados.
• Propriedade box-sizing em CSS3, 2009 a 2014.CSS3 introduz box-sizing: border-box como uma alternativa opt-in ao content-box. WebKit e Firefox o suportam a partir de 2009; IE 8 (2009) torna-se a primeira versão do IE a suportá-lo nativamente. Permite aos desenvolvedores escolher o modelo de caixa estilo IE ou estilo W3C por elemento.
• Border-box universal de Paul Irish, 2012.Paul Irish (Google) publica o post de blog «* { box-sizing: border-box } FTW» (fevereiro de 2012), argumentando que border-box universal é um padrão sensato para novos projetos. O padrão se espalha rapidamente através dos padrões de framework (Bootstrap, Tailwind, Material UI). Em 2015, a maioria dos resets CSS e frameworks vêm com border-box como padrão.
• Propriedades lógicas, 2018 a 2024.CSS Logical Properties and Values Module Level 1 (CR junho de 2018) introduz alternativas agnósticas à direção: margin-inline-start (início da direção do texto) em vez de margin-left, padding-block (topo + base) em vez de padding-top + padding-bottom. Crítico para idiomas da direita para a esquerda (árabe, hebraico) e internacionalização moderna. O suporte do navegador atinge 95%+ até 2022.

Fluxos do mundo real

• Depurar bugs de layout.Quando um elemento está renderizando em um tamanho inesperado, abrir o painel de estilo computado do DevTools do navegador revela os quatro valores de caixa numericamente. Este visualizador é útil para fazer a matemática previamente: «se eu definir width 200, padding 16, border 2, qual é o tamanho total em cada modo box-sizing?». Especialmente útil ao ensinar a juniores por que width: 100% com padding transborda o pai em modo content-box.
• Ensinar CSS a iniciantes.O modelo de caixa é o primeiro conceito abstrato que desenvolvedores web iniciantes devem internalizar. Uma visualização interativa codificada por cores supera ler especificações. Instrutores de bootcamp e autodidatas usam visualizadores de modelo de caixa como uma forma «tátil» de ver como margem, borda e padding se empilham. Esta ferramenta existe em parte para este propósito.
• Dimensionamento de componentes do sistema de design.Sistemas de design especificam alturas de botão, ritmos de padding e escalas de margem em tokens (e.g., spacing-1, spacing-2, spacing-3). Ao implementar esses em código, o modelo de caixa determina se o botão renderizado final é do tamanho pretendido. Visualize a matemática primeiro para pegar erros off-by-padding antes que cheguem ao handoff Figma-para-React.
• Design responsivo e margens percentuais.Valores percentuais para padding, margem, width e height são calculados relativos à largura do conteúdo do pai (não à altura, surpreendentemente), o que pode causar comportamento estranho em mobile. O visualizador do modelo de caixa ajuda você a pensar sobre o que percentuais significam antes de escrever o CSS. Por exemplo, padding-top: 50% em um div cria um contêiner de proporção quadrada (usado para placeholders de imagem nos dias pré-propriedade aspect-ratio).
• Dimensionamento de alvos de toque de acessibilidade.WCAG 2.1 SC 2.5.5 (Nível AAA) recomenda alvos de toque mínimos de 44x44 pixels CSS. O modelo de caixa determina se o conteúdo combinado + padding de um botão atinge esse limiar. Use o visualizador para confirmar que padding: 12px 16px ao redor de texto com altura de linha de 18px dá um botão que excede 44px em ambas as dimensões, satisfazendo a diretriz.
• Alinhamento CSS Grid e Flexbox.Ferramentas de layout modernas (CSS Grid, Flexbox) tratam cada item grid/flex como uma caixa sujeita ao modelo de caixa. Entender como padding e margem interagem com gap, justify-content e align-items requer fluência no modelo de caixa. Colapso de margens é suprimido dentro de contêineres flex/grid, o que muitas vezes surpreende desenvolvedores CSS acostumados ao layout de bloco tradicional.

Armadilhas comuns e o que significam

• Surpresas de colapso de margens.Quando dois elementos de bloco têm margens se tocando verticalmente, elas colapsam na maior das duas, não na soma. Uma margem inferior de 20px encontrando uma margem superior de 30px produz 30px de espaço, não 50px. Margens de pai e primeiro/último filho também colapsam se o pai não tem padding, borda ou overflow definido. Dentro de contêineres flex ou grid, margens não colapsam. Esta regra pegou todo desenvolvedor CSS em algum momento.
• Matemática de largura content-box vs border-box.Definir width: 100%; padding: 20px em um elemento content-box o torna 40px mais largo que o pai (transbordamento). Com border-box, a mesma declaração se encaixa dentro do pai corretamente. Esta é a armadilha de modelo de caixa mais comum; a regra universal * { box-sizing: border-box } conserta a maioria preventivamente. Sempre saiba em qual modo você está trabalhando.
• Padding/margem percentual é relativa à largura.padding-top: 50% e margin-bottom: 50% calculam o percentual com base na largura do conteúdo do pai, não na altura. Isto é não óbvio e é a base do clássico hack «contêiner de proporção de aspecto» (um div com padding-top: 56.25% cria uma caixa 16:9). Agora CSS tem a propriedade aspect-ratio, mas código legado e Tailwind moderno ambos dependem do truque do padding percentual.
• Lacuna de linha de base de elementos inline.Um <img> dentro de um div contêiner tem uma misteriosa lacuna de 4 a 6 pixels abaixo dele. Isso é porque elementos inline alinham-se à linha de base do texto, deixando espaço para descendentes. Conserte com img { display: block }, img { vertical-align: bottom }, ou definindo font-size: 0 no pai. Este é um dos mais antigos bugs do modelo de caixa em CSS, datando de 1996.
• Margens negativas para truques de layout.Margens aceitam valores negativos, o que puxa elementos um em direção ao outro e é ocasionalmente útil (e.g., expandir um contêiner «fora» do padding do seu pai). No entanto, margens negativas são uma fonte frequente de bugs confusos de sobreposição. Use-as deliberadamente, comente seu código e prefira posicionamento CSS Grid/Flexbox quando possível. Padding negativo é CSS inválido e ignorado pelos navegadores.
• Padding + borda + conteúdo > contêiner.Quando a soma de conteúdo + padding + borda excede a largura disponível do pai, o elemento transborda. Correções comuns: box-sizing: border-box, reduzir o valor de width, usar overflow: hidden no pai (recortar o transbordamento), ou min-width: 0 em filhos flex para substituir o comportamento implícito min-width: auto. Muitos bugs de «layout quebra em mobile» são transbordamentos causados pela matemática do modelo de caixa.

Privacidade: tudo roda em seu navegador

Ferramentas de aprendizado e visualização CSS vêm em dois sabores: páginas HTML simples rodando JavaScript do lado do cliente (privadas, rápidas, sem configuração) e editores em nuvem com projetos salvos (colaborativos mas com compromissos de privacidade). Esta ferramenta é do primeiro tipo. Seus valores inseridos, seu estado de alternância box-sizing, seu CSS gerado: tudo permanece em sua sessão do navegador. Atualize a página e o estado se vai a menos que você tenha copiado o CSS primeiro.

Os riscos de privacidade são baixos aqui porque valores do modelo de caixa raramente contêm informações sensíveis. Ainda assim, a falta de analytics importa: você pode experimentar livremente sem que seu processo de tentativa-e-erro seja registrado. Particularmente útil em ambientes de sala de aula ou treinamento corporativo onde fazer alunos ou treinandos registrarem contas em plataformas de terceiros é um ponto de atrito. Esta é uma única página estática sem backend, utilizável em qualquer navegador, incluindo máquinas empresariais bloqueadas.

Quando outra ferramenta é a escolha certa

• DevTools do navegador para depuração ao vivo.Chrome e Firefox DevTools incluem um painel de modelo de caixa que exibe os quatro valores de caixa para qualquer elemento selecionado em uma página ao vivo. Edite os valores em linha e veja a página atualizar. Para depurar layouts de página reais (não exploração abstrata do modelo de caixa), DevTools supera esta ferramenta porque funciona em seu código real com cascatas CSS reais e herança.
• Figma para saída de especificação de design.Designers usam Figma, Sketch ou Adobe XD para layoutar componentes com medidas exatas em pixels. O painel de inspeção da ferramenta de design exporta valores de margem e padding que desenvolvedores traduzem para CSS. Para o handoff design-para-desenvolvimento, a ferramenta de design é a fonte da verdade; este visualizador é para entender o comportamento CSS, não para gerar especificações de componentes de produção.
• CSS-in-JS para encapsulamento de componentes.Ao construir bibliotecas de componentes com styled-components, Emotion, vanilla-extract ou soluções CSS-in-JS similares, o modelo de caixa é encapsulado dentro de cada componente. Margens no wrapper mais externo, padding dentro. Este visualizador ajuda a raciocinar sobre a geometria de um componente individual; a biblioteca lida com a coordenação de layout entre componentes.
• Ferramentas CSS Grid/Flexbox para layout.Para layouts multi-elemento (grades de página, galerias de cartões, barras de navegação), CSS Grid e Flexbox são as abstrações certas, não o modelo de caixa sozinho. Nossas ferramentas Flexbox Generator e CSS Grid Generator ajudam com esses layouts diretamente. O modelo de caixa é necessário mas não suficiente para layout moderno; use a ferramenta certa para a escala certa.

Mais perguntas frequentes

Devo usar universal * { box-sizing: border-box }?

Para a maioria dos projetos, sim. A proposta de Paul Irish de 2012 agora é o padrão da indústria e se alinha com como a maioria dos desenvolvedores espera que width e height funcionem. Frameworks como Bootstrap, Tailwind, Bulma e Material UI vêm com border-box como padrão. Projetos modernos começando em 2026 devem definir *, *::before, *::after { box-sizing: border-box; } no topo de seu reset, e raramente precisar pensar sobre box-sizing novamente. Substituições específicas para content-box são possíveis para elementos individuais onde border-box bagunçaria as coisas.

Por que minha margem empurra o pai para baixo em vez de empurrar os irmãos?

Isso é colapso de margens. Quando a margem superior de um filho encontra a borda superior do pai sem padding/borda entre eles, a margem do filho «escapa» e aplica-se ao pai. Correções: adicionar padding-top: 1px ao pai (qualquer valor funciona), adicionar border: 1px solid transparent, definir o pai como contêiner flex ou grid (colapso é suprimido nesses modos), ou usar display: flow-root no pai (uma regra moderna explícita «estabelecer um novo contexto de formatação de bloco»). Todos esses bloqueiam a margem de colapsar através.

Qual a diferença entre margin: auto e margin: 0?

margin: 0 significa sem margem; o elemento fica encostado em seus vizinhos. margin: auto significa que o navegador calcula a margem para distribuir o espaço horizontal restante, tipicamente usado para centralizar um elemento de bloco: margin-left: auto; margin-right: auto; divide igualmente o espaço restante. margin: auto auto auto auto (ou abreviação margin: auto) centraliza tanto horizontal quanto verticalmente dentro de um contêiner flex. Fora de flex/grid, apenas margens auto horizontais funcionam.

Como outline difere de border?

Outline desenha ao redor de um elemento mas está fora do modelo de caixa: não adiciona ao tamanho do elemento e não empurra vizinhos. Border é parte do modelo de caixa e adiciona ao tamanho renderizado. Outline é tipicamente usado para anéis de foco (contornos :focus-visible) onde você quer um indicador visível sem mudar o layout. Border é usado quando a linha deve ser parte da estrutura do elemento. Não remova outline: none sem fornecer um indicador de foco alternativo; fazê-lo quebra a acessibilidade do teclado.

Por que usar propriedades lógicas como margin-inline-start?

Propriedades lógicas (margin-block-start, padding-inline, etc.) se adaptam à direção de escrita do documento. Em inglês (da esquerda para a direita), margin-inline-start é o mesmo que margin-left. Em árabe ou hebraico (da direita para a esquerda), torna-se margin-right automaticamente. Para sites que suportam múltiplos idiomas, propriedades lógicas tornam a internacionalização CSS automática. Para sites apenas em inglês, são equivalentes em efeito mas sinalizam a intenção mais claramente: «esta margem está no início do fluxo de texto» em vez de «esta margem está no lado esquerdo».

Como crio uma caixa de proporção de aspecto fixa?

A maneira moderna é a propriedade CSS aspect-ratio: aspect-ratio: 16/9 em um div faz sua altura automaticamente 9/16 de sua largura. Suportado em todos os navegadores modernos (2021+). A técnica legada usa padding-top como porcentagem: um div com padding-top: 56.25% cria uma proporção 16:9 (9/16 = 56.25%). O truque padding-top ainda funciona mas a sintaxe de propriedade é mais limpa. Use aspect-ratio para novo código; o hack legado permanece em Tailwind e outras ferramentas que precisam de amplo suporte de navegador.