White space between parent and child div-CodePudding

I can't remove the white space between the parent and child divs.

This white space is not visible on all devices, I don't know if it's related to the resolution or the browser.

Here is the code(I update the code as I try to correct it from the answers):

https://codepen.io/max-himes/pen/eYMLpQv code

The problem seems to occur more often on mobile than on PC, moreover I have a list of this item on my web page and not all items are affected.

Thanks in advance for your help!

CodePudding user response：

this could be a half pixel, which is being behaved differently with each browser, it could be seen when zooming in, sometimes it couldn't

https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/

CodePudding user response：

This white space is not visible on all devices, I don't know if it's related to the resolution or the browser [...] The problem seems to occur more often on mobile than on PC

It's a rounding discrepancy. Probably related to this line:

font-size: 1.75vw;

The browser on each device is calculating a number of pixels - on some devices the browser ends up with a result which is 1px less than on other devices.

The fix (and I appreciate this will require some design thinking) is to use a more explicit value which is less likely to end up with a possible fraction of a pixel (which then needs to be rounded up or down).

I'd be tempted to start by giving .rating:

an explicit height; and
an explicit line-height