Border-box

Olá Victor, tudo bem?

Por padrão, o cálculo das dimensões widthe heightsão medidas incluindo só o conteúdo interno da caixa, mas não o padding, border ou margin. Sendo assim, o cálculo desses outros elementos estão fora da box de conteúdo.

Então, quando existem elementos com bordas e margens do lado direito e esquerdo, eles não caberão nas restrições de tamanho do container pai que eles estão inclusos. Foi o que ocorreu no exemplo da aula, que são 3 elementos com width: 30%, padding: 30px 20px e border-width: 2px.

Dessa forma, a propriedade box-sizing: border-box é utilizada para alterar esse padrão de cálculo das larguras e alturas dos elemento, ou seja, ela informa ao navegador que é necessário levar em conta as bordas e margens nos valores que você especificar para a largura e altura de um elemento.

O resultado disso é que se você definiu um elemento com uma width:30%, esses 30% agora irão incluir o padding: 30px 20px e border-width: 2px, e consequentemente a caixa de conteúdo será reduzida para absorver essa largura extra que foi adicionada. Com isso, a propriedade box-sizing: boder-box torna muito mais fácil dimensionar os elementos.

Caso queira saber mais, segue algumas indicações de leitura:

• Alura - Box Model e o Box Sizing
• MDN - Box Sizing
• W3Schools - Box Sizing

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

Obrigado!