Visualizador de Modelo de Caixa

Cada elemento HTML é renderizado como uma caixa retangular. O modelo de caixa CSS descreve como as camadas de conteúdo, padding, border e margin do elemento se sobrepõem para determinar o espaço total que o elemento ocupa na página. Compreender este modelo é essencial para controlar o layout e o espaçamento.

Ajuste as entradas numéricas de cada camada — margin, border, padding e dimensões do conteúdo. Clique numa seção de camada para destacá-la no diagrama. A pré-visualização visual atualiza-se instantaneamente e o código CSS correspondente é gerado na parte inferior para copiar.

A margin é o espaço transparente fora da border que separa o elemento dos vizinhos. A border é o limite visível ao redor do padding. O padding é o espaço entre a border e o conteúdo real. O content é a área mais interna onde aparecem o texto e os elementos filhos.

Com content-box (padrão), a width e height definidas aplicam-se apenas à área de conteúdo — padding e border são adicionados por cima. Com border-box, width e height incluem padding e border, tornando os cálculos de layout mais intuitivos. A maioria dos projetos modernos usa border-box globalmente.

Use este visualizador para experimentar com diferentes valores e ver como cada camada contribui para o tamanho total do elemento. Quando um elemento ocupa mais espaço do que o esperado, verifique se os valores de padding ou border o estão empurrando para além da largura desejada. O CSS gerado pode ser colado diretamente no seu projeto.