CSS Layout Fix

Gap Under Image CSS? Fix the Invisible Layout Space

Gap under image CSS is one of those tiny layout bugs that makes a clean design look slightly broken. The image is inside the container, the width looks correct, the border looks correct, but there is still a mysterious little space under the image. In most cases, the problem is not margin or padding. The real cause is that images are inline elements by default, and the browser leaves baseline space under them like it would for text.

Browse All Fixes Explore CSS Fixes

Common image layout bug
Often mistaken for margin
Fast CSS baseline fix

Quick diagnosis

If you see a small gap under an image, check these causes before randomly removing margins.

The image is still inline By default, an <img> behaves like inline content, so the browser leaves room below it for text descenders.

The container has line-height space Because the image sits on a text baseline, the parent container may keep extra vertical space under it.

You are fixing the wrong thing Developers often try margin, padding, height, or overflow first, but the real fix is usually simpler.

The clean fix is usually one CSS line Setting the image to display:block removes the baseline behavior in most real layouts.

What the bug looks like

You place an image inside a card, banner, figure, or wrapper, and a tiny strip of background remains visible below the image.

Why it happens

The image is treated like inline content. Inline content aligns with the text baseline, and the browser reserves space below that baseline.

What usually fixes it

Use display:block on the image, or use vertical-align:middle, vertical-align:bottom, or parent line-height fixes when needed.

Why this tiny image gap feels so annoying

The gap under an image feels ridiculous because nothing looks obviously wrong. The image is not overflowing. The container is not broken. The width is correct. The CSS may even look clean.

But the browser is not thinking about the image like a block. It is treating it more like a piece of inline text. That means it keeps a little breathing room below the baseline, just like it would for letters such as g, p, q, and y.

This is the same kind of hidden layout behavior that makes bugs like horizontal scroll on mobile or container width problems feel mysterious at first.

Common signs you are dealing with baseline spacing

The gap is very small It usually looks like a thin strip under the image, not a large spacing problem.

Margin and padding do not explain it You inspect the image and wrapper, but no obvious margin or padding is causing the space.

The bug appears inside cards or wrappers It is especially visible when the image background and parent background have different colors.

Common broken version

Inline image trap

<div class="image-card">
  <img src="photo.jpg" alt="Example image">
</div>

.image-card {
  background: #111827;
}

.image-card img {
  width: 100%;
  height: auto;
}

Why this creates a gap

The image fills the width, but it is still inline by default. Inline elements sit on the text baseline, so the browser leaves a small amount of space under the image.

That space is not really image margin. It is baseline space. That is why removing margin or padding often does nothing.

Simple rule: if an image creates a mysterious bottom gap, check inline baseline behavior before changing the layout.

Recommended baseline fix

Most common solution

In most real layouts, the cleanest fix is to make the image a block-level element.

.image-card img {
  display: block;
  width: 100%;
  height: auto;
}

Before: the tiny gap under the image

Image still behaves like inline text Gap visible

In the broken version, the image behaves like inline content. The black strip under the image represents the baseline space the browser reserves below inline elements.

After: the image touches the container

Image now behaves like a block Gap removed

In the fixed version, display:block removes the inline baseline behavior, so the image sits flush against the bottom of the container.

Why `display:block` works so well

When you set the image to display:block, the browser stops treating it like inline text. The image becomes a block that takes up its own space without reserving extra room for text descenders.

This is why display:block is such a common reset for images inside cards, galleries, hero sections, thumbnails, and responsive components.

Better reusable image reset

Safe default

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Use `display:block`

This is the most reliable fix when the image should behave like a layout block inside a card, section, wrapper, or figure.

Use `vertical-align`

If you need the image to remain inline, try vertical-align:middle or vertical-align:bottom instead.

Check parent `line-height`

In some special cases, the parent’s line-height contributes to the visual space around inline content.

Alternative fix

Keep image inline

.image-card img {
  vertical-align: bottom;
}

When vertical-align makes sense

Use vertical-align when the image must stay inline with text or other inline elements. This changes how the image aligns with the text baseline.

But for most card images, thumbnails, banners, product images, and hero images, display:block is usually cleaner and easier to reason about.

Fast practical rule

If you see a tiny gap under an image and cannot find margin or padding, add display:block to the image first. If the gap disappears, it was inline baseline spacing.

Why this bug appears inside cards so often

Card layouts usually have a visible background, border, shadow, or rounded corner. That makes the tiny image gap much easier to notice.

For example, if the card background is dark and the image stops just above the bottom edge, the remaining baseline space appears like a strange strip under the image.

In responsive layouts, image gaps can become even more noticeable when cards stack on mobile. If your image layout also causes width problems, check Fix responsive design not working and Fix CSS Grid breaking on mobile.

Card image pattern

Clean card media

.card {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
}

Figure pattern

Image plus caption

<figure class="media">
  <img src="layout.jpg" alt="Layout example">
  <figcaption>Example caption</figcaption>
</figure>

.media img {
  display: block;
  width: 100%;
  height: auto;
}

.media figcaption {
  padding: 12px 16px;
}

When the image has a caption

Captions are normal block content. The image should usually be block-level too, so the caption spacing is controlled by your CSS instead of accidental baseline behavior.

This makes the layout more predictable, especially when the figure appears inside articles, documentation pages, cards, or tutorial examples.

Debug checklist

Inspect the image and confirm whether it is still using the default inline behavior.
Check whether the visible gap is small and directly under the image.
Look for margin and padding first, but do not assume they are the cause.
Add display:block to the image and test whether the gap disappears.
If the image must remain inline, test vertical-align:bottom or vertical-align:middle.
Check the parent element’s line-height if the image is mixed with text.
Use max-width:100% and height:auto to keep images responsive.
Check the layout on mobile if the image sits inside a card, grid, or responsive wrapper.

Best first move Add display:block to the image and retest before changing the wrapper.

Most common false fix Removing random margin or padding when the real issue is baseline spacing.

Most overlooked cause Images are inline by default, even when they visually feel like blocks.

Better mindset A tiny image gap is often a text-alignment behavior, not a broken box model.

Final takeaway

Gap under image CSS usually happens because the image is inline by default. The browser aligns it with the text baseline and leaves a small amount of space below it.

The fastest fix is usually display:block on the image. If the image needs to remain inline, use vertical-align instead. Once you understand that the gap is baseline spacing, this bug stops feeling mysterious and becomes one of the easiest CSS fixes in your toolkit.

Want more fixes like this?

Explore the full FrontFixer fixes library and keep debugging with practical guides built for real front-end problems.