HTML 5 strange img always adds 3px margin at bottom

Question

When I change my website to

<!DOCTYPE HTML>

Every img element that is wrapped inside a DIV has a 3px bottom margin to it even though that margin is not defined in CSS. In other words, there are no style attributes that are causing that 3px bottom margin.

<div class="placeholder">
    <img alt="" src="/haha.jpg" />
</div>

Now let's say haha.jpg is 50x50, and .placeholder is set to display: table. Strangely the height dimensions of .placeholder in my observation is 50x53...

Has anyone encountered this anomaly before and fixed it?

EDIT

Here is the JS FIDDLE

http://jsfiddle.net/fRpK6/

Can you make a jsfiddle.net as an example? include some relevant css you have? — James Khoury, Jun 01 '12 at 04:02
@JamesKhoury added jsfiddle, notice how .placeholder having black background does not fit the height of the img correctly. — shiva8, Jun 01 '12 at 04:09
@xbonez I do have a reset.css, it's irrelevant, check the JS fiddle — shiva8, Jun 01 '12 at 04:10
Equivalent question: http://stackoverflow.com/questions/7774814/remove-white-space-below-image (There are probably others) — Brilliand, Jun 01 '12 at 04:28
I have the same problem with 'inline-block' wrapped with 'block' element. vertical-align: middle; - for 'inline-block' is working solution for that case. — Kalinin, Jul 31 '12 at 07:17

score 326 · Accepted Answer · answered Jun 01 '12 at 04:13

326

This problem is caused by the image behaving like a character of text (and so leaving a space below it where the hanging part of a "y" or "g" would go), and is solved by using the vertical-align CSS property to indicate that no such space is needed. Almost any value of vertical-align will do; I'm fond of middle, personally.

img {
    vertical-align: middle;
}

jsFiddle: http://jsfiddle.net/fRpK6/1/

answered Jun 01 '12 at 04:13

Brilliand

13,404
6
46
58

17

The problem is caused by `vertical-align: baseline`, which is the default for most elements and indicates that that space should be reserved. Some of the other legal values for `vertical-align` also reserve this space, but `top`, `text-top`, `middle`, `bottom` and `text-bottom` do not. `sub` also doesn't appear to, but I'm leery of trusting that one. – Brilliand Jun 01 '12 at 04:20
5

If the image is smaller than your font size, then this won't work, because the div will still reserve enough space for text even if it isn't reserving that "special" space. In that case, you'll have to use either pantryfight's suggestion or `display: block` to remove the text from the picture entirely. – Brilliand Jun 01 '12 at 04:23
2

Also applies to iframe (e.g., for embedded youtube videos or google maps) – Alec Jacobson Mar 25 '18 at 19:21
1

2021 and still the best answer! – Naderio Jun 15 '21 at 19:39

score 26 · Answer 2 · answered Jun 01 '12 at 04:23

26

I often solve this by giving the image element display:block or display:inline-block as appropriate.

answered Jun 01 '12 at 04:23

SpliFF

38,186
16
91
120

Images are `display:inline-block` by default; that won't do anything. – Brilliand Jun 01 '12 at 04:24
Actually, this solves the issue for some reason with HTML5. Like described also [here](http://my-tech-explorations.blogspot.fi/2012/05/html5-image-padding-issue.html), +1 – BudwiseЯ Jun 01 '12 at 04:26
9

no, they are `display:inline`, or more technically a "replaced inline element" – SpliFF Jun 01 '12 at 04:26
@SpliFF Okay, yes, you're right; it acts somewhat like `inline-block`, but it isn't the same thing, and actually setting it to `inline-block` does have some effect. (I thought I should formally acknowledge that, so your comment stops accumulating upvotes.) – Brilliand Aug 07 '14 at 18:00
`display: inline-block` can't fulfill it~ – twxia Jun 05 '16 at 03:18
2

`display:block` is good. But `display:inline-block` does NOT work. – situee May 15 '18 at 03:40

score 7 · Answer 3 · answered Dec 08 '13 at 00:28

7

it is solved my problem.

line-height: 0;

answered Dec 08 '13 at 00:28

oytunyuksel

71
1
2

This is roughly equivalent to `font-size: 0px;`, mentioned in another answer. – Brilliand Jun 12 '14 at 15:25

score 3 · Answer 4 · answered May 21 '13 at 12:26

3

I believe setting

line-height: 1;

on the image will also fix this problem, especially if it's in a block by itself.

answered May 21 '13 at 12:26

dkeeling

193
2
12

score 2 · Answer 5 · edited Apr 13 '15 at 04:48

2

apply display: block to the image fix it, i have this issue with images inside floated divs.

edited Apr 13 '15 at 04:48

Shaunak D

20,588
10
46
79

answered Apr 12 '15 at 22:53

Sebachenko

31
1

score 2 · Answer 6 · answered Mar 21 '16 at 09:35

2

For me it was a combination of

font-size: 0px;
line-height: 0;

on the wrapping container that fixed it.

answered Mar 21 '16 at 09:35

leymannx

5,138
5
45
48

score 1 · Answer 7 · answered Jun 01 '12 at 04:05

1

I'm not sure of the exact explanation of why it happens, but give your placeholder div font-size: 0px;

.placeholder {
    font-size: 0px;
}

answered Jun 01 '12 at 04:05

pantryfight

338
1
3
13

yes but it's ridiculous. you're still asking the browser to treat the image as a text character and if you want to add other elements inside it they will inherit the 0px font size. – SpliFF Jun 01 '12 at 04:23

score 1 · Answer 8 · answered Dec 28 '15 at 09:15

1

maybe it is the problem of the white-space that causes this. so, the methods bellow maybe useful

img {
display: block;

} or

img {
vertical-align: top/middle/...;

}

or

.placeholder {
font-size: 0;

}

answered Dec 28 '15 at 09:15

arlendp

85
4

2

how does this improve on the other answers that are already posted? – Clay Dec 28 '15 at 09:26

score 1 · Answer 9 · answered Feb 24 '19 at 18:36

1

In my special case none of the above solutions worked.

I had a wrapping div with display: flex;.

I managed to make this working by adding: align-items: flex-start; to the wrapping div AND to all the images: display: block;.

Before I explicitly told the content to align it messed up the Layout. After setting it to flex-start everything works like a charm.

answered Feb 24 '19 at 18:36

Naderio

1,306
11
26

Were you using a flexbox with `flex-direction: column` and a fixed height? That would put a margin between the images (but not below the last one) for a completely different reason. – Brilliand Jun 15 '21 at 20:35

score 0 · Answer 10 · answered Jun 01 '12 at 04:27

0

not sure what's the exact problem but i have try this with 2 different option first apply class on img tag this will work and second apply font size 0 px;

http://jsfiddle.net/fRpK6/3/

answered Jun 01 '12 at 04:27

CSS Guy

1,978
3
18
27

`display: table`? It works; it isn't really cross-browser, but I think it works on all of the browsers that this problem occurs on. Hmm, I guess I'll compile a list of values for `display` that fix the problem... `block`, `list-item`, `table`, and any of the 8 `table-*` values, though you'd have to be insane to use most of them. – Brilliand Jun 01 '12 at 04:38

score 0 · Answer 11 · answered Mar 27 '14 at 22:43

0

It also happens with piled up divs, just add float property. Example:

<body>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
  <div class="piledUpDiv">Some text</div>
</body>

Problematic CSS:

.piledUpDiv{
    width:100%;
    display:inline-block;   
 }

Solution:

.piledUpDiv{
    width:100%;
    display:inline-block;
    float:left; 
 }

answered Mar 27 '14 at 22:43

Hubyx

1

`float` overrides `display`. It's a different way of aligning things, and could potentially cause quite a mess if you don't specifically want float behavior. – Brilliand Oct 26 '17 at 17:48

HTML 5 strange img always adds 3px margin at bottom

EDIT

11 Answers11

Linked

Related