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.
AnteriorPróximo