Categories
css html image

Image inside div has extra space below the image

661

Why in the following code the height of the div is bigger than the height of the img ? There is a gap below the image, but it doesn’t seems to be a padding/margin.

What is the gap or extra space below image?

#wrapper {
  border: 1px solid red;
  width:200px;
}
img {
  width:200px;
}
<div id="wrapper">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

Image with a gap or white space under it

1

794

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

  • adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
  • change the display so it isn’t inline.
div {
  border: solid black 1px;
  margin-bottom: 10px;
}

#align-middle img {
  vertical-align: middle;
}

#align-base img {
  vertical-align: bottom;
}

#display img {
  display: block;
}
<div id="default">
<h1>Default</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

<div id="align-middle">
<h1>vertical-align: middle</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>
  
  <div id="align-base">
<h1>vertical-align: bottom</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt=""> </div>

<div id="display">
<h1>display: block</h1>
  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="">
</div>

The included image is public domain and sourced from Wikimedia Commons

5

  • 12

    To be more precise, this happens b/c inline elements take up the space of their current line-height. Setting line-height to the desired dimension would also overcome the undesired whitespace.

    May 15, 2015 at 19:20


  • 3

    Does “f” qualify as a descender?

    – j08691

    Feb 17, 2016 at 20:50

  • 3

    @j08691 — Depends on the font.

    – Quentin

    Feb 18, 2016 at 9:12

  • 3

    Note that if you’re using vertical-align: bottom or middle, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. stackoverflow.com/questions/17905827/…. Reduced test case: jsbin.com/jotacipaqu/1/edit?html,css,output

    Nov 15, 2020 at 16:55


  • Wow. I was just banging my head with the problem. Setting vertical-align: bottom; did the trick.

    – Indika K

    May 28 at 8:14

157

Another option suggested in this blog post is setting the style of the image as style="display: block;"

4

  • 4

    thanks. This also fixed a similar issue with space under a flash movie. (added display:block to embed/object tags)

    – jessieloo

    Dec 18, 2012 at 18:17

  • 5

    or inline-block if you still want it to display inline as images normally do.

    – Ian

    Aug 11, 2014 at 1:26

  • 12

    @Ian @Imperative inline-block does not seem to be working.

    Nov 15, 2015 at 21:59

  • This, however, breaks text-align:center.

    – Rodrigo

    Jul 24, 2021 at 21:00

133

+50

Quick fix:

To remove the gap under the image, you can:

  • Set the vertical-align property of the image to vertical-align: bottom; vertical-align: top; or vertical-align: middle;
  • Set the display property of the image to display:block;

See the following code for a live demo:

#vAlign img {
  vertical-align :bottom;
}
#block img{
  display:block;
}

div {border: 1px solid red;width:100px;}
img {width:100px;}
<p>No fix:</p>
<div><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With vertical-align:bottom; on image:</p>
<div id="vAlign"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

<p>With display:block; on image:</p>
<div id="block"><img src="http://i.imgur.com/RECDV24.jpg" /></div>

Explanation: why is there a gap under the image?

The gap or extra space under the image isn’t a bug or issue, it is the default behaviour. The root cause is that images are replaced elements (see MDN replaced elements). This allows them to “act like image” and have their own intrinsic dimensions, aspect ratio….
Browsers compute their display property to inline but they give them a special behaviour which makes them closer to inline-block elements (as you can vertical align them, give them a height, top/bottom margin and padding, transforms …).

This also means that:

<img> has no baseline, so when images are used in an inline formatting
context with vertical-align: baseline, the bottom of the image will be
placed on the text baseline.

(source: MDN, emphasis mine)

As browsers by default compute the vertical-align property to baseline, this is the default behaviour. The following image shows where the baseline is located on text:

Location of the baseline on text
(Image source)

Baseline aligned elements need to keep space for the descenders that extend below the baseline (like j, p, g ...) as you can see in the above image. In this configuration, the bottom of the image is aligned on the baseline as you can see in this example:

div{border:1px solid red;font-size:30px;}
img{width:100px;height:auto;}
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />jpq are letters with descender
</div>

This is why the default behaviour of the <img> tag creates a gap at the bottom of it’s container and why changing the vertical-align property or the display property removes it as in the following demo:

div {width: 100px;border: 1px solid red;}
img {width: 100px;height: auto;}

.block img{
  display:block;
}
.bottom img{
  vertical-align:bottom;
}
<p>Default:</p>
<div>
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With display:block;</p>
<div class="block">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>
<p>With vertical-align:bottom;</p>
<div class="bottom">
  <img src="http://i.imgur.com/RECDV24.jpg" />
</div>

6

  • So this is why setting font-size to 0 does not work. or does it?

    – Persijn

    Jan 22, 2016 at 18:12

  • 2

    @Persijn it does. Like setting line-height:0; but I don’t consider this as a good workaround compared to changing the vertical-align or display properties

    – web-tiki

    Jan 22, 2016 at 18:14

  • 2

    Note, however, that some browsers don’t respect font-size:0: they set the font size to the minimum size in the user settings.

    – Mr Lister

    Dec 6, 2017 at 17:12

  • Yes it seems a white space.

    Jan 23, 2018 at 12:56

  • well,I think the middle text-top sub superposition in the picture is not right.

    May 19, 2018 at 2:10