Why does a simple image get a margin-bottom c.q. output space under the image?

Question

Please have a look at this simple jsfiddle. It contains the following code:

<div style="background:yellow; display:inline-block;">
    <img src="http://www.wedesoft.de/test/test.png" />
</div>

As you can see, this will output a space under the image so that you can see the yellow colored container. I do not know why, because no space was defined.

Can somebody tell me what is going on please?

possible duplicate of http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image or [Remove white space below image](http://stackoverflow.com/questions/7774814/remove-white-space-below-image) — web-tiki, Sep 23 '14 at 11:44

Sander Koedood · Answer 1 · 2014-09-23T12:00:14.007

3

An image is an inline element. That means it is treated as text. Text has a line-height. The line-height is what is causing the space at the bottom. There are multiple ways to solve this.

The following are my favorites:

div {
    line-height: 0;
}

By setting line-height to 0, the space goes away.

img {
    display: block;
}

By making the image a block element, it's no longer considered text, thus, line-height isn't applicable anymore.

As Marc Audet stated in the comments, another way to solve this would be by using vertical-align.

img {
    vertical-align: top;
}

It doesn't matter whether you use top or bottom.

edited Sep 23 '14 at 12:00

answered Sep 23 '14 at 11:50

Sander Koedood

6,007
6
25
34

1

You may want to mention that applying `vertical-align: top or bottom` also fixes the problem. – Marc Audet Sep 23 '14 at 11:53
@Danko Removing the `inline-block` won't solve the problem, since the image will remain `inline`, which is the cause of the problem. You can open [this fiddle](http://jsfiddle.net/v6uLbsry/3/) and see that it doesn't change the room at the bottom. @Marc Audet: I'll update my answer. Thank you. – Sander Koedood Sep 23 '14 at 11:59

score 0 · Answer 2 · answered Sep 23 '14 at 11:47

0

This occurs due to the line-height attribute; try this Jsfiddle Where i just set the line height to 0.

answered Sep 23 '14 at 11:47

Azrael

1,094
8
19

@user3631654 Make sure to mark an awnser for future visitors ;) – Azrael Sep 23 '14 at 11:51

score 0 · Answer 3 · answered Sep 23 '14 at 11:51

i think you missed line-height try this

<div style="background:yellow;display:inline-block;line-height: 0px;">
    <img src="http://www.wedesoft.de/test/test.png">
</div>

other way you can apply style display: block; to img. like

<div style="background:yellow;display:inline-block;">
    <img src="http://www.wedesoft.de/test/test.png" style="display: block;">
</div>

score -1 · Accepted Answer · edited May 23 '17 at 11:49

-1

For some reason

display:block;

solves this problem as you can see in the accepted answer here: Remove white space below image

Is still do not know why...

edited May 23 '17 at 11:49

Community

1
1

answered Sep 23 '14 at 11:49

user3631654

1,735
6
22
38

Bertran Guasch Parera · Answer 5 · 2018-05-03T15:20:05.593

-1

take a look at line-height propety on this web: http://www.w3schools.com/cssref/pr_dim_line-height.asp

basicly what's happening is that there's some default space on the div so that's why you see the yellow line. Adding line-height: 0px; should solve the problem.

edited May 03 '18 at 15:20

answered Sep 23 '14 at 11:52

Bertran Guasch Parera

55
2
11

Why does a simple image get a margin-bottom c.q. output space under the image?

5 Answers5