O que é a propriedade box-sizing: border-box e qual o seu papel no CSS?

A propriedade box-sizing determina como é calculada a largura e altura totais de um elemento.

box-sizing: content-box (valor padrão) — a largura e altura referem-se apenas ao conteúdo (content). O padding e border são adicionados aos valores especificados de largura/altura.

box-sizing: border-box — a largura e altura incluem padding e border. O content é comprimido para caber dentro das dimensões especificadas.

O papel de box-sizing: border-box no CSS:

• Simplificação dos cálculos: Facilita o cálculo dos tamanhos dos elementos, especialmente ao usar padding e border.
• Previsibilidade no layout: Permite definir com precisão os tamanhos dos blocos, independentemente de padding e border, tornando o layout mais previsível.
• Conveniência no modelo de caixa: Corresponde à compreensão intuitiva do tamanho do bloco — suas bordas. Facilita a criação de grades e componentes de tamanho fixo.

Exemplo:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Largura total = 100 + 10*2 + 1*2 = 122px */
  /* Altura total = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Largura total = 100px */
  /* Altura total = 100px */
  /* O conteúdo ocupará 100 - 10*2 - 1*2 = 78px em largura e altura */
}