Como é que a propriedade box-sizing afeta o tamanho do elemento?

A propriedade CSS box-sizing determina como são calculadas as dimensões de um elemento — incluindo ou não as margens internas (padding) e as bordas (border).

• Valor content-box (padrão): a largura e a altura do elemento definem apenas o conteúdo. As margens internas e as bordas são adicionadas a esses tamanhos, aumentando o tamanho total do elemento.

• Valor border-box: a largura e a altura incluem o conteúdo, as margens internas e as bordas. Isso significa que, se definir uma largura de 100px, o conteúdo será reduzido considerando o padding e a border para que o tamanho total permaneça 100px.

Exemplo:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Neste caso, o elemento .box terá uma largura total de 200px, incluindo padding e border. Se fosse content-box, a largura total seria 200 + 210 + 25 = 230px.

Usar border-box muitas vezes simplifica o layout, pois os tamanhos dos elementos não "descontrolam" devido ao padding e border.