Fala Jonathan tudo bem?

Vamos lá, todos elementos HTML é uma "caixa", aonde podemos controlar o seu width, height, padding, etc.. E o Box Model é como todas essas propriedades vão se relacionar e definir o tamanho final daquele elemento. E o box model padrão que iniciamos (content-box), diz que a propriedade width vai tratar do conteudo da nossa página sem considerar o padding nem o border do elemento. Veja o exemplo abaixo:

Inspecionando o elemento, clicando aonde eu marquei como 1, e passando o mouse em cima do elemento, podemos ver o tamanho total do elemento que atualmente é de 200px de largura e 200px de altura. Agora veja o que acontece se adicionarmos um padding de 10px:

Quando adicionamos o padding de 10px da pra ver que esse padding foi somado com o tamanho do elemento (10px para a direita, e esquerda, aumentando 20px para o width, e 10px para o topo, e o bottom, aumentando 20px para o height ). E normalmente quando queremos definir um tamanho para algum elemento, nós não queremos que um padding ou border nos atrapalhe nisso, aumentando o tamanho do nosso elemento. Então para isso temos a propriedade box-sizing que serve para alterar esse padrão. E o border-box é normalmente o mais usado, que faz com que as propriedades de largura (width) e de altura (height) incluem o tamanho padding size e a propriedade border, ou seja, quando definirmos um padding para esse elemento, o width irá considerar esse padding que adicionamos, veja esse mesmo exemplo citado acima, só que agora utilizando o border-box:

Viu? O tamanho do padding que colocamos ja foi incluido nesse tamanho de 200px que haviamos definido, veja como ficou o código CSS:

Caso não tenha entendido, clique aqui e veja um artigo explicando um pouco melhor sobre isso, ou veja a própria documentação do Box Sizing

Espero ter ajudado :D

MEU DEUS!! mais que explicação perfeita, muito obrigada! Entendi perfeitamente, aliás me ajudou com a dúvida de hoje no trabalho :0