Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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