Image inside div has extra space below the image

Question

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

Here's a good read on this issue: [The Strange Gap In HTML](https://dev.to/christiankaindl/the-strange-img-gap-in-html) — Matheus Avellar, Sep 29 '17 at 19:40

Quentin · Accepted Answer · 2020-01-16T12:11:34.267

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.

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

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. — Kevin Boucher, May 15 '15 at 19:20
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. https://stackoverflow.com/questions/17905827/why-does-my-image-have-space-underneath#answer-17905828:~:text=if%20your%20image%20is%20small%20(smaller,space%20appearing%20above%20the%20image%20instead. Reduced test case: https://jsbin.com/jotacipaqu/1/edit?html,css,output — Oliver Joseph Ash, Nov 15 '20 at 16:55

score 163 · Answer 2 · edited Dec 17 '20 at 21:07

163

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

edited Dec 17 '20 at 21:07

isherwood

58,414
16
114
157

answered Aug 25 '11 at 20:03

Thea

7,879
6
28
40

4

thanks. This also fixed a similar issue with space under a flash movie. (added display:block to embed/object tags) – jessieloo Dec 18 '12 at 18:17
5

or `inline-block` if you still want it to display inline as images normally do. – Ian Aug 11 '14 at 01:26
12

@Ian @Imperative `inline-block` does not seem to be working. – p.matsinopoulos Nov 15 '15 at 21:59
This, however, breaks `text-align:center`. – Rodrigo Jul 24 '21 at 21:00

web-tiki · Answer 3 · 2020-05-28T05:46:46.063

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:

(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>

So this is why setting font-size to 0 does not work. or does it? — Persijn, Jan 22 '16 at 18:12
@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 '16 at 18:14
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 06 '17 at 17:12
well,I think the `middle` `text-top` `sub` `super`position in the picture is not right. — xianshenglu, May 19 '18 at 02:10
@xianshenglu do you have another image that hilights the baseline and would be more accurate? I'd be glad to change the current one if you do. — web-tiki, Mar 28 '19 at 13:53

score 51 · Answer 4 · edited Jan 10 '22 at 15:37

51

One can also nullify parent's line height:

#wrapper {
  line-height: 0;
}

All fixes: http://jsfiddle.net/FaPFv/

edited Jan 10 '22 at 15:37

TylerH

20,799
66
75
101

answered Dec 19 '12 at 21:01

Pavlo

43,301
14
77
113

8

WARNING! this will also kill any text nodes in the #wrapper. as it will be inherited. But bonus points for that awesome fiddler! here it is updated with text nodes. http://jsfiddle.net/FaPFv/30/ – gcb Jan 09 '14 at 01:19
1

Alternatively, font-size:0 – Kiran Jan 21 '20 at 20:04
@mfluehr Please do not copy substantive content from JSFIddle to Stack Overflow for someone else's code. JSFiddle does not publish a license and you do not have the legal right to publish someone else's code to Stack Overflow, which licenses its content under CC By-SA 4.0. – TylerH Jan 10 '22 at 15:38

score 14 · Answer 5 · answered Nov 03 '16 at 14:12

14

All you have to do is assign this property:

img {
    display: block;
}

The images by default have this property:

img {
    display: inline;
}

answered Nov 03 '16 at 14:12

Daniel Díaz

216
4
18

score 11 · Answer 6 · edited Sep 30 '17 at 01:55

11

You can use several methods for this issue like

Using line-height
```
#wrapper {  line-height: 0px;  }
```

Using display: flex

#wrapper {  display: flex;         }
#wrapper {  display: inline-flex;  }

Using display: block, table, flex and inherit

#wrapper img {  display: block;    }
#wrapper img {  display: table;    }
#wrapper img {  display: flex;     }
#wrapper img {  display: inherit;  }

edited Sep 30 '17 at 01:55

Matheus Avellar

1,507
1
22
29

answered Jan 04 '17 at 06:46

Santosh Khalse

12,002
3
36
36

5

Please don't recommend the very sloppy `line-height` hack, or at least make it clear, why it is the worst "solution" of them all: the moment someone puts text next to the image (especially preformatted multi-line with BR tags), they will find themselves in a worse situation than they started out with. – Sz. Sep 10 '19 at 12:19
This helped me of all the solutions most. However I have my wrapping div expanding now beyond the subject image, previously display inline block in the div fixed that. TY – landed Mar 17 '21 at 14:36

score 5 · Answer 7 · edited Jan 18 '18 at 12:27

5

I used line-height:0 and it works fine for me.

edited Jan 18 '18 at 12:27

Abhishek Pandey

13,302
8
38
68

answered Apr 24 '14 at 07:48

Abdulla khan

758
5
11

1

Sorry, -1: that screws up text positioning, so if someone also puts some (esp. multi-line, say, with `
`) text next to the image, they will have a mispositioned, overlapped/overhanging mess. – Sz. Sep 10 '19 at 12:10

score 4 · Answer 8 · answered Nov 17 '14 at 23:40

I found it works great using display:block; on the image and vertical-align:top; on the text.

.imagebox {
    width:200px;
    float:left;
    height:88px;
    position:relative;
    background-color: #999;
}
.container {
    width:600px;
    height:176px;
    background-color: #666;
    position:relative;
    overflow:hidden;
}
.text {
    color: #000;
    font-size: 11px;
    font-family: robotomeduim, sans-serif;
    vertical-align:top;
    
}

.imagebox img{ display:block;}

<div class="container">
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
    <div class="imagebox">
        <img src="http://machdiamonds.com/n69xvs.jpg" /> <span class="text">Image title</span>
    </div>
</div>

or you can edit the code a JS FIDDLE

score 0 · Answer 9 · answered Aug 24 '21 at 15:32

0

You can also set overflow: hidden; for the container, and increase the height of the image to > 100%. height: 100%;

answered Aug 24 '21 at 15:32

akhilrawat001

109
1
8

score -1 · Answer 10 · edited Jan 18 '18 at 12:28

-1

I just added float:left to div and it worked

edited Jan 18 '18 at 12:28

Abhishek Pandey

13,302
8
38
68

answered Dec 04 '13 at 08:02

TomoMiha

1,218
1
14
12

17

This is because setting `float:left` causes `display:block` – Kevin Boucher May 15 '15 at 20:53

Image inside div has extra space below the image

10 Answers10

Quick fix:

Explanation: why is there a gap under the image?

Linked

Related