[Reclamação] Não entendi exatamente a aplicação desse box-sizing: border-box Publicado 3 anos atrás , em 28/02/2022 Front-end HTML e CSS

Olá, Andre, como vai?

O box-sizing: border-box é uma propriedade do CSS que altera a maneira como as dimensões de um elemento são calculadas. Normalmente, ao definir a largura (width) e altura (height) de um elemento, o tamanho do padding e da border são adicionados a essas dimensões. Com o box-sizing: border-box, o valor do padding e da border é incluído dentro das dimensões definidas, ou seja, a largura e a altura que você especifica se tornam o tamanho total do elemento, incluindo o padding e a border.

Por exemplo:

/* Sem box-sizing */
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Aqui, o width de 200px será apenas o espaço para o conteúdo. O padding e a border aumentam o tamanho final do elemento, resultando em uma largura total de 250px.

/* Com box-sizing: border-box */
div {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

Agora, com box-sizing: border-box, a largura de 200px já inclui o padding e a border, então o tamanho total do elemento será 200px, sem ultrapassar o valor definido.

Esse artigo explica bem sobre box model, vale a pena conferir.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)