Solucionado
Entendi que ao colocar padding, valores são adicionados à largura final do objeto fazendo com que ele fique maior. Para que isso não aconteça, é preciso usar o border-sizing: border-box; No entando, não entendi muito bem o que ele realmente faz. Como ele faz com que a largura continue a mesma e valores sejam adicionados com o uso do padding?
Olá Marcus, tudo bem?
Por padrão, o cálculo das dimensões de larguras(width)e alturas(height)dos elemento são atribuídos apenas a caixa de conteúdo desse elemento e é isso que é levado em consideração pelo navegador.
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. Isso ocorre no exemplo da aula, que são 3 elementos com width:30%, padding: 30px 20px e border-width: 2px.
Sendo assim, 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. Dessa forma, a propriedade box-sizing: boder-box torna muito mais fácil dimensionar os elementos.
Espero ter ajudado. Continue praticando e bons estudos!
Então quer dizer que antes era 30% + os valores de borda e padding, e agora é 30% com o valor da borda e do padding. É isso?
Exatamente! E é por isso que antes não cabia e após o box-sizing: border-box passou a caber.