box-sizing: border-box;
Essa propriedade altera o comportamento padrão do cálculo de largura e altura. Com border-box, o valor de width e height inclui o conteúdo, o padding e a borda. Isso garante que a imagem e seu padding não ultrapassem o tamanho total do elemento pai. width: 100%;
Define que a largura da imagem deve ocupar 100% da largura disponível do elemento pai. Com box-sizing: border-box, isso já considera o padding no cálculo. padding: 5px;
Adiciona um espaço interno entre a borda do elemento pai e o conteúdo (neste caso, a imagem). O box-sizing: border-box garante que esse padding não aumente o tamanho total.
