box-sizing: border-box | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Oi, Felipe, tudo bem?

Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não. Então, o que o border-box faz é definir se os valores dados a width e a height serão calculados dentro da caixa. Veja esse exemplo:

<html>
<head>
<style> 
#example1 {
  box-sizing: content-box;  
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}

#example2 {
  box-sizing: border-box;
  width: 300px;
  height: 100px;
  padding: 30px;  
  border: 10px solid blue;
}
</style>
</head>
<body>

<h2>box-sizing: content-box (default):</h2>
<div id="example1"><p>380px</p></div>

<h2>box-sizing: border-box:</h2>
<div id="example2"><p>300px</p></div>

</body>
</html>

No exemple1, que é modo padrão, será somado aos 300px de largura 20px de bordar (10px de direita e 10 de esquerda) + 60px de padding (30px da esquerda e 30px da direita) totalizando 380px. Com o box-sizing: border-box, no exemple2, todo esse comportamento é prevenido e deixando a caixa com os 300px de largura.

Na aluramais tem um vídeo explicando mais sobre como funciona o box-sizing: https://www.youtube.com/watch?v=Q33ojlocKc0&app=desktop

Se ficou alguma dúvida, é só falar!