An image placed inside a div with no padding or margins still leaves a few pixels of space below it. Which CSS layout rule causes that gap, and what removes it?

## The image is text, as far as layout is concerned An `<img>` is a **replaced element** — its content comes from outside CSS — but its default outer display type is inline-level. So when it is the only child of a `div`, the browser does not stack it as a block. It creates an **inline formatting context** inside the `div`, generates a line box, and places the image into that line box as if it were an enormous word. ## Line boxes, the strut, and the baseline Every inline formatting context has a **strut**: an invisible zero-width inline box carrying the block container's own `font-family`, `font-size` and `line-height`. The strut fixes where the baseline sits and how much room is reserved above it (ascent) and below it (descent), even when there is no visible text on the line. The image's default alignment is `vertical-align: baseline`, which puts the **bottom edge of the image** on that baseline. The strut's descent still has to fit, so the line box extends below the baseline by that descent — typically a couple of pixels at a 16px font, more with a large `line-height`. The `div` sizes itself to the line box, so it is taller than the image by exactly that descent. Nothing about the image changed; the space is the room the line reserves for letters that hang below the baseline. This is why the two diagnostic tests work: ```css /* Test 1: does the gap track the parent's typography? */ .wrapper { line-height: 3; } /* gap grows */ /* Test 2: remove the reserved descent */ .wrapper { line-height: 0; } /* gap disappears */ ``` If the gap responds to either, it is baseline space, not a margin, padding or border. ## The fixes **`display: block` on the image.** This is the most robust answer. A block-level image no longer participates in an inline formatting context, so there is no line box, no strut and no baseline to sit on. The parent's height becomes the image's height. ```css img { display: block; } ``` **`vertical-align: bottom` on the image.** This keeps the image inline but aligns its bottom edge with the bottom of the line box rather than the baseline, so the descent strip is no longer below it. `vertical-align: middle` is also commonly used and removes the visible gap in the single-image case, because the image dominates the line box height. **`line-height: 0` (or `font-size: 0`) on the parent.** This shrinks the strut so there is no descent to reserve. It works, but it changes the typography of anything else in that container, so it is a poor default for a container that also holds text. **Make the parent a flex or grid container.** Children of a flex or grid container are **blockified**: an inline-level child is treated as block-level, so the image never joins an inline formatting context in the first place and the gap cannot occur. ## The same cause, other symptoms This is not an image quirk. Any inline-level box that is taller than the text around it produces the same effect: `<svg>`, `<canvas>`, `<iframe>`, `<video>`, and any `display: inline-block` box. A row of `inline-block` cards whose container is mysteriously a few pixels taller than the cards has exactly this cause. Likewise, cards of different heights in such a row line up on their **baselines** rather than their tops, which looks like a bug and is the same rule seen from a different angle. ## When you should not remove it Baseline alignment is the correct behaviour when the image genuinely belongs in running text — an inline icon next to a label, or an emoji-sized glyph in a sentence. There, forcing `display: block` would break the line. The right move is to keep the image inline and tune the alignment: `vertical-align: middle` or a small `vertical-align` length offset so the icon's optical centre lines up with the text's x-height. The rule of thumb is: an image that is *content in a sentence* stays inline and gets aligned; an image that is *a block in a layout* becomes `display: block` or a flex/grid child, and then the gap question never arises.