box-sizing:border-box;

Faz com que a largura e altura do elemento já incluam padding e border. 

Sem ele: o elemento pode ficar maior que o tamanho definido.

Com ele: o tamanho fica certinho e mais fácil de controlar.

Ela muda como o navegador calcula o tamanho de um elemento.

Normalmente, quando você define:

width: 200px;

padding: 20px;

border: 5px solid;

Sem border-box, a conta fica:

largura do conteúdo = 200px

padding esquerda/direita = 40px

borda esquerda/direita = 10px

→ largura final = 250px

Ou seja: você pediu 200px… mas ele ficou maior.

Com box-sizing: border-box;

box-sizing: border-box;

width: 200px;

padding: 20px;

border: 5px solid;

Agora os 200px já incluem conteúdo + padding + borda.

→ largura final continua 200px

O conteúdo interno é que se ajusta.

Visualmente:

Sem border-box:

200+40+10=250

Com border-box:

200 = conteúdo + padding + borda

Porque usar? Porque deixa o layout previsível. Você coloca:

width: 50%;

padding: 20px;

E o elemento não estoura a largura por causa do padding. 

Dica!!!

Colocar no começo do CSS:

* {

  box-sizing: border-box;

}

Isso aplica em tudo da página.