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.