O modelo de caixa CSS (Box Model) define que todo elemento HTML é uma caixa retangular composta por conteúdo, preenchimento (padding), borda (border) e margem (margin). Ele determina o tamanho e o espaçamento dos elementos, sendo fundamental para o layout web. A propriedade box-sizing: border-box é recomendada para incluir padding e borda no tamanho total.
Cálculo de Tamanho (Box Sizing)
content-box(Padrão): A largura/altura definida se aplica apenas ao conteúdo. Padding e bordas são adicionados ao tamanho total.border-box: A largura/altura definida inclui conteúdo, padding e borda, facilitando o layout.
css
/* Exemplo de uso do border-box */
.caixa {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
/* Largura total será 300px, não 350px+ */
}
Para uma melhor organização e responsividade, é comum aplicar
box-sizing: border-box a todos os elementos no início do CSS.
