putting padding around Image Component with fill property

by

I’m using the Image Component with the fill property, which is wrapped by a div, with a position: relative. Normally, it works as expected, but when I wanted to have some padding on the image (therefore putting it on the div), instead of having the padding around the image, the Image Component filled the additional space of the padding as well. So what should I do? Here is the structure of the code:

<div className="relative p-3 other-classes">
    <Image
        src="https://stackoverflow.com/my/image"
        fill
        alt="the image im trying to put the padding around"
    />
</div>

I tried looking around this piece of code to see if other components are affecting this, but no, it’s not about the other components.

Leave a Comment