By Misha Moroshko


2011-04-27 12:40:35 8 Comments

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

9 comments

@Quentin 2011-04-27 12:42:32

By default, an image is rendered inline, like a letter.

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 f, 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.

@Mark G. 2013-08-18 03:18:35

Thanks for explaining the rationale behind it. After some experimenting, I realized that turning the image into a block element fixed my own little extra-spacing problem, but I had no idea why... this explains it perfectly. Thanks!

@Kevin Boucher 2015-05-15 19:20:23

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.

@j08691 2016-02-17 20:50:41

Does "f" qualify as a descender?

@Quentin 2016-02-18 09:12:45

@j08691 — Depends on the font.

@MeV 2016-06-24 11:20:53

what if the gap is also on the right or left sides?

@Quentin 2016-06-24 11:23:31

@MeV 2016-06-24 11:32:02

it's exact the same issue. I have removed the gap under the image with the vertical-align and I still have the same gap issue on the right and on the left. This is happening because the column has an alignment left or right.

@Quentin 2016-06-24 11:33:04

@MeV — No. If you had a gap under the image which you solved with vertical align and gaps beside as well … then you had 2 different issues and the one you still have isn't the one described in this question.

@TomoMiha 2013-12-04 08:02:09

I just added float:left to div and it worked

@Kevin Boucher 2015-05-15 20:53:37

This is because setting float:left causes display:block

@Abdulla khan 2014-04-24 07:48:58

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

@Santosh Khalse 2017-01-04 06:46:06

You can use several methods for this issue like

  1. Using line-height

    #wrapper {  line-height: 0px;  }
    
  2. Using display: flex

    #wrapper {  display: flex;         }
    #wrapper {  display: inline-flex;  }
    
  3. Using display: block, table, flex and inherit

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

@Daniel Díaz 2016-11-03 14:12:48

All you have to do is assign this property:

img {
    display: block;
}

The images by default have this property:

img {
    display: inline;
}

@web-tiki 2016-01-22 17:31:32

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 and W3C). 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:

[...] when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be posed on the container's 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

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

@Persijn 2016-01-22 18:12:39

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

@web-tiki 2016-01-22 18:14:46

@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

@Mr Lister 2017-12-06 17:12:16

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

@HQtunes.com 2018-01-23 12:56:46

Yes it seems a white space.

@xianshenglu 2018-05-19 02:10:56

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

@Timothy 2014-11-17 23:40:55

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

@Pavlo 2012-12-19 21:01:38

One can also nullify parent's line height:

#wrapper {
  line-height: 0;
}

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

@gcb 2014-01-09 01:19:37

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. jsfiddle.net/FaPFv/30

@Pavlo 2014-01-09 09:03:27

@gcb you're right, there is no silver bullet, I believe.

@Thea 2011-08-25 20:03:54

Another option suggested here is setting the style of the image as style="display: block;"

@jessieloo 2012-12-18 18:17:09

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

@Ian 2014-08-11 01:26:17

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

@p.matsinopoulos 2015-11-15 21:59:53

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

Related Questions

Sponsored Content

94 Answered Questions

[SOLVED] How to horizontally center a <div>?

29 Answered Questions

[SOLVED] How do I auto-resize an image to fit a div container

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 775315 View
  • 1492 Score
  • 31 Answer
  • Tags:   html css html-table

14 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 554013 View
  • 1349 Score
  • 14 Answer
  • Tags:   css

31 Answered Questions

[SOLVED] How to make a div 100% height of the browser window?

  • 2009-10-15 21:18:43
  • mike
  • 1671294 View
  • 1839 Score
  • 31 Answer
  • Tags:   html css css3 height

34 Answered Questions

[SOLVED] How to make div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1217065 View
  • 1794 Score
  • 34 Answer
  • Tags:   html css width

28 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1499063 View
  • 2092 Score
  • 28 Answer
  • Tags:   html css opacity

33 Answered Questions

[SOLVED] How to vertically align an image inside a div?

38 Answered Questions

[SOLVED] Lazy load of images in ListView

20 Answered Questions

[SOLVED] Vertically align text next to an image?

Sponsored Content