Gap under image CSS problems usually happen because an image is still behaving like inline text, so the browser reserves baseline space below it.

CSS Layout Fix

Gap Under Image CSS? Fix the Invisible Layout Space

A small gap under an image can make a card, banner, thumbnail, figure, or hero section look slightly broken. The confusing part is that the image may have no margin, the wrapper may have no padding, and the layout can still show a thin strip under the image. In most cases, that gap is not a box-model problem. It is inline baseline spacing.

Browse All Fixes Explore CSS Fixes

Image baseline gap
Card image spacing
One-line CSS fix
Responsive image reset

Quick diagnosis

If the space is small, directly under the image, and margin or padding does not explain it, check inline image behavior first.

The image is inline by default An <img> behaves like inline content unless you tell it otherwise.

The browser reserves descender space Inline content sits on a text baseline. The browser leaves room below that baseline for letters such as g, p, and y.

Margins are often innocent Removing random margin or padding does not help when the real issue is baseline alignment.

The common fix is display:block When the image is part of the layout, make it behave like a block.

What the bug looks like

A thin strip of parent background appears under the image, especially inside cards, wrappers, figures, galleries, product thumbnails, and hero sections.

Why it happens

The image sits on the inline text baseline. The gap is the browser preserving room for text descenders below that baseline.

What usually fixes it

Set the image to display:block, or use vertical-align:bottom if the image must remain inline.

Why gap under image CSS bugs happen

Images feel like boxes, but HTML does not automatically treat them as block-level layout boxes. By default, an image is an inline replaced element. That means it participates in a line box, similar to inline text. Because inline text needs space below the baseline for descenders, the browser can reserve a little empty space under the image.

This is why the bug often looks impossible at first. You inspect the image, the wrapper, and the card. You do not see margin. You do not see padding. But the gap is still there because the spacing is coming from inline formatting behavior, not from the normal margin or padding you expected.

Error 1

The image is still inline

This is the classic version of the bug. The image fills the wrapper, but the browser still treats it like inline content sitting on a baseline. The container background shows through below the image.

Broken code

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;
}

Broken visual result

Baseline space visible

Image behaves like inline text Gap visible

The dark strip under the image is not a margin. It is the inline baseline gap showing through.

Correct code

Block image

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

Fixed visual result

Gap removed

Image behaves like a block No baseline gap

Once the image becomes a block, it no longer reserves text descender space under itself.

Error 2

You are debugging margin or padding instead of baseline spacing

Developers often lose time removing margin, changing padding, setting fixed heights, or hiding overflow. Those changes may accidentally hide the symptom, but they do not explain the real cause. The root issue is usually the inline formatting context.

Wrong direction

False fix

.image-card {
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
}

What is really happening

The image sits on a line baseline. The browser reserves room below that baseline for text descenders.

Correct direction

Change image behavior

.image-card img {
  display: block;
}

Why this is cleaner

Instead of fighting the wrapper, you change the image itself from inline behavior to block behavior. That removes the baseline relationship directly.

Use margin and padding when you want intentional spacing. Use display:block when you want an image to fit flush inside a visual container.

Error 3

The image is inside a card, so the tiny gap becomes obvious

The baseline gap is always small, but card designs make it visible. Cards often have borders, shadows, rounded corners, dark backgrounds, or cropped image areas. That makes a tiny gap look like a broken visual detail.

Broken card pattern

Card media gap

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

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

Broken card result

unexpected image gap

Product card The tiny dark line makes the whole card feel less polished.

Correct card pattern

Clean card media

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

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

Fixed card result

gap removed

Product card The media area now sits cleanly against the card content.

Error 4

The image must stay inline, but baseline alignment is still wrong

Sometimes an image really does need to remain inline with text, icons, badges, emoji-like graphics, or small UI media. In that case, display:block may not be the right fix. Instead, use vertical-align to control the inline alignment.

Baseline default

Inline alignment

.inline-thumb {
  display: inline-block;
  vertical-align: baseline;
}

Inline element aligned to baseline

Text before text after

The visual may feel slightly low or leave awkward space depending on the surrounding text.

Better inline alignment

Bottom aligned

.inline-thumb {
  display: inline-block;
  vertical-align: bottom;
}

Inline element aligned more cleanly

Text before text after

This keeps the element inline but changes how it sits against the text line.

Error 5

You fixed the image gap but forgot responsive image safety

Once you fix the tiny baseline gap, do not stop there. Most real image layouts also need a safe responsive image reset. Without max-width:100% and height:auto, images can create width and overflow problems on smaller screens.

Incomplete reset

Only fixes gap

img {
  display: block;
}

Better reusable reset

Gap + responsive safety

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

Why this matters

The image gap bug is a spacing issue. Responsive image overflow is a width issue. They are different bugs, but they often appear in the same card, gallery, hero, or article layout.

Fast practical rule

If there is a tiny gap under an image and no margin or padding explains it, add display:block to the image. If that removes the gap, the issue was inline baseline spacing. For inline images that must stay inline, use vertical-align:bottom or vertical-align:middle.

Best default image pattern for real layouts

In production CSS, many teams use a small image reset because images inside cards, articles, product grids, and responsive layouts usually need predictable behavior. This does not mean every image must always be block-level, but it is a strong default for layout images.

If an image is part of the structure of a card, section, hero, thumbnail, gallery, or figure, display:block usually makes the layout easier to control.

Recommended global image reset

Production default

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

Figure with caption pattern

Article images

<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;
}

Why captions should not depend on accidental spacing

A caption should have intentional spacing from your CSS. It should not be separated from the image because the browser happened to reserve baseline descender space.

Making the image block-level gives you full control: the image ends where it should, and the caption spacing comes from figcaption, not from hidden inline behavior.

Debug checklist

Inspect the image and wrapper to confirm there is no obvious margin or padding creating the gap.
Check whether the gap is small, directly under the image, and the same color as the parent background.
Add display:block to the image and retest.
If the image must remain inline, try vertical-align:bottom or vertical-align:middle.
Check the parent line-height if the image is mixed with text.
Use max-width:100% and height:auto for responsive image safety.
For cards, make the media image block-level before adjusting card padding or wrapper height.
For figures, control caption spacing with figcaption padding or margin, not accidental baseline space.

Best first move Add display:block to the image.

Most common false fix Removing random padding, margin, or height from the wrapper.

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

Better mindset A tiny image gap is usually a line-box behavior, not a broken card.

Final takeaway

Gap under image CSS bugs usually happen because the image is still inline by default. Inline content sits on a text baseline, and the browser reserves a little room below that baseline for descenders. That small reserved area is the mysterious strip you see under the image.

The fastest fix is usually display:block. For layout images inside cards, figures, banners, galleries, and responsive components, combine it with max-width:100% and height:auto. Once you understand that the gap is baseline spacing, this bug becomes simple instead of mysterious.

Want more fixes like this?

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