@pRicard0
Posted
É porque é uma tag de imagem. Não é uma div, é uma imagem. Você não deve esperar conseguir botar padding numa imagem porque tipo... geralmente ela tem um tamanho definido e quando você aplica padding você teoricamente obriga ela a mudar o tamanho definido dela... tipo... pode causar bug. Seria melhor só diminuir o tamanho da imagem e posicionar. Mas dá para fazer o que você queria de outra forma
Eu coloquei a imagem dentro de uma tag <section class="image-section"> que representa a seção de imagem do card. Dentro da tag eu apliquei os seguintes estilos:
.image-section {
display: flex;
justify-content: center;
padding-top: 2rem;
padding-bottom: 2rem;
}
Há maneiras diferentes de fazer mas é assim que eu faria. Você ainda pode adicionar padding-right e padding-left mas vai reduzir o tamanho da imagem sem causar bug. Porque você não está obrigando diretamente a imagem a mudar de tamanho, só está dizendo quanto de espaço ela pode ocupar
Essa explicação do possível bug é só usando minha lógica, não sei como as coisas funcionam por debaixo dos panos de verdade. Geralmente quando algo assim acontece comigo, eu só tento de outros jeitos mesmo.
