The mystery gap under an image
A card with one image in it has a few pixels of card colour showing below the image. The image has no margin. The card has no padding. Measuring the gap gives 5.39px, which is not a number anybody typed.
An image in a frame. There is a strip of the frame's colour showing below the image and nowhere else. Nothing in the stylesheet has a margin, a padding or a border. Inspect the image and the gap is not attached to it. Measure the gap and it is not a round number. Make the frame exactly as tall as the image — 320×160 — and keep it correct when the image is a different height. Setting the frame's height to 160px will pass three checks and fail the fourth, which is the one that swaps the image.
Hint
What kind of box is an `<img>`? What else is on that line with it, even when the line contains nothing else?
The fixture — markup and base stylesheet
You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.
<div class="frame"><img class="shot" alt=""></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; } .frame { width: 320px; line-height: 1.4; background: #ff7ab6; } .shot { width: 280px; height: 160px; background: #7bdff2; }