next/image add additional pixels to parent element without a trace

[rayriffy]

Bug report

Describe the bug

Chrome debugger says that next/image element is an exact square (1st image) but parent element have additional 6px adds up without a trace (2nd image).

This only happens in 10.0.1 not 10.0.0

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Checkout sekai-next at commit rayriffy/sekai-next@f3bbdbe
2. yarn dev or https://sekai-next-kcv87uh9y.vercel.app/
3. Go to /music or click at Music tab on navigation
4. Happy debugging

Expected behavior

This is captured when I revert to [email protected]

System information

• OS: macOS 11
• Browser (if applies): Chrome 86.0.4240.183
• Version of Next.js: 10.0.1
• Version of Node.js: 14.15.0

Additional context

Add any other context about the problem here.

[nicholaschiang]

@rayriffy this is a duplicate of #18915. Here's a temporary fix. All you've got to do is add the following styling to the parent wrapper:

.wrapper {
  letter-spacing: 0;
  word-spacing: 0;
  font-size: 0;
}

[Timer]

This mimics the default behavior of the <img /> component (which also has the text padding), so it's expected.

Closing as a duplicate of #18637, please voice any new layout requests there!

[P233]

@nicholaschiang Why not add vertical-align: bottom to the inline-block built-in image wrapper? No need to style the parent wrapper.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.