Next.js Discord

Discord Forum

How to Reset Margin and Padding in Images in NextJS

Answered
Gray-crowned Yellowthroat posted this in #help-forum
Open in Discord
Avatar
Gray-crowned YellowthroatOP
<span className="flex mx-auto gap-3 sm:gap-4 items-start">
  with
  <div className="imageWrapper">
    <Image
      src={"/logo.png"}
      alt="Zscrum Logo"
      width={500}
      height={100}
      className="h-24 sm:h-48 lg:h-56 w-auto object-contain block"
    />
  </div>
  
</span>


My Image is taking some inner space, I want to set the space to be 0,

AS you can see in Image, I want to align Mira logo with the word "with" but the space around the image isnt letting me do so. I dont want to decrease the size of that image only need to remove the space around that image

Any Help is appricaited Thank You
Image
Answered by B33fb0n3
it looks like the image itself contains that spacing. You have two options:

1. Use paint or any other photo software to delete the space around it (so you have only the logo)
2. Give the surrounding container an absolute size and use object-fit to cut the image correctly.

I suggest doing "1."
View full answer

4 Replies

Avatar
B33fb0n3
it looks like the image itself contains that spacing. You have two options:

1. Use paint or any other photo software to delete the space around it (so you have only the logo)
2. Give the surrounding container an absolute size and use object-fit to cut the image correctly.

I suggest doing "1."
Answer
Avatar
B33fb0n3
@Gray-crowned Yellowthroat solved?
Avatar
joulev
yeah beefbone is right, i should also add that preferably here you should use svg instead of png, and when exporting the logo as svg, most likely you won't see that padding
Avatar
B33fb0n3