Olá, João.
Tudo bem?
Vou tentar explicar como funciona o box-sizing com base no exercício e por que a opção correta é box-sizing: border-box.
box-sizing
Essa propriedade define como a largura e a altura de um elemento são calculadas. Existem dois valores principais para box-sizing:
content-box: Esse é o valor padrão. Quando você define a largura e altura de um elemento, apenas o conteúdo é considerado, excluindo o padding e a borda. Ou seja, se você definir width: 100%, o padding e a borda serão adicionados a essa largura, fazendo com que o elemento ultrapasse o limite do elemento pai.
border-box: Com esse valor, a largura e altura incluem o conteúdo, o padding e a borda. Isso significa que se você definir width: 100%, o padding e a borda já estão incluídos nessa largura total, evitando que o elemento ultrapasse o limite do elemento pai.
Aplicação no seu caso
No exercício, a imagem está ultrapassando o limite do elemento pai. Para resolver isso, você precisa garantir que a largura total da imagem (incluindo o padding) não exceda a largura do elemento pai. É aqui que box-sizing: border-box entra em cena, pois ele garante que o padding e a borda sejam incluídos na largura total da imagem.
Portanto, a configuração correta é:
box-sizing: border-box;
width: 100%;
padding: 5px;
Exemplo Prático
Imagine que você tem um elemento pai com largura de 300px e você quer que a imagem ocupe toda essa largura, mas com um padding de 5px. Com box-sizing: content-box, a largura total da imagem seria 300px (conteúdo) + 10px (padding total), ultrapassando o limite do pai. Já com box-sizing: border-box, a largura total da imagem permanece 300px, incluindo o padding.
Espero ter ajudado e bons estudos!
