Extra padding under an tag?

Question

I'm getting some sort of padding below an img tag in my webpage. The html looks like:

<li>
  <div>Title</div>
  <img src='...' width='60px' height='60px' />
</li>

Yeah so there is about 5 pixels of padding beneath the image (I can tell because the bg color of the parent li item is different). I tried assigning a class to the img tag with padding/margin/border all set to zero, but no change. I'm wondering if there's anything I'm missing about img tags that could be causing this padding to appear?

When I remove the img tag, and just leave the 'title' div, the extra padding is gone,

Thanks

------------- Update -------------------

This is only happening on FF, chrome and safari look ok. Firebug also shows the padding is part of the img element.

Doesn't that come from the `li`? Are you using Firebug to determine which element causes the space? — Pekka, Jun 27 '10 at 16:59
Oh hmmm no - this seems to be happening in FF, chrome and safari are ok. — user246114, Jun 27 '10 at 17:00
Yeah using firebug, it thinks the padding is part of the img tag, but i haven't set anything like that on the img. — user246114, Jun 27 '10 at 17:01
I got the same problem, but only on non-FF browsers. In FF it works fine... — stiank81, Sep 19 '11 at 07:22

Richard M · Answer 1 · 2012-11-15T09:52:27.203

51

If you can set the image's display style to block that should solve the problem. Setting vertical-align to bottom or middle should also work. I think the problem comes about because Firefox tries to position inline images so their bottom edge is aligned with the baseline of the text, and so there is space below the image for the text descenders.

edited Nov 15 '12 at 09:52

answered Jun 27 '10 at 17:26

Richard M

14,244
6
52
48

6

+1 By default, `vertical-align` is set to `baseline` and in these cases you want `bottom`. Floating kind of work but it is a side effect and it can cause side problems too. – FelipeAls Jun 27 '10 at 17:47
3

`vertical-align: bottom` solved this problem for me, and without all the side-effects of changing the display style. Thanks! – William Denniss Oct 23 '11 at 04:25

score 2 · Answer 2 · answered Nov 19 '12 at 12:03

2

Just add height attribute to image in style tag, like if you need a thin line then 1px needs to be specified externally for safari.

answered Nov 19 '12 at 12:03

Amit Apte

21
1

score 1 · Answer 3 · answered Jun 27 '10 at 17:06

1

I think you might be seeing the space after your image before the end of the list item. Try getting rid of the whitespace in your html, like this:

<li><div>Title</div><img src='...' width='60px' height='60px' /></li>

answered Jun 27 '10 at 17:06

dmazzoni

12,866
4
38
34

Explain your downvotes folks. This does cause issues at times. – ScottE Jun 27 '10 at 17:45
1

@ScottE Very true. I didn't down vote him, but I think he got the down vote since it didn't solve the issue. – Gert Grenander Jun 27 '10 at 17:58

score 0 · Answer 4 · answered Jun 27 '10 at 16:59

0

What if you force the padding margin and border to 0 on img elements? Are you working with Firebug?

answered Jun 27 '10 at 16:59

greg0ire

22,714
16
72
101

score 0 · Answer 5 · answered Jun 27 '10 at 17:07

You could provide a link or more code to allow a better resolution of your problem, but:

1. Verify if your image is 60px by 60px as setup in your img tag

2. Remove padding and margin and border from your img, you may have a default setting for img tag that causes what you're refereeing

3. The extra space under your img may come from other elements in your page, meaning that with the img in place, some element forces that extra space

Extra padding under an tag?

5 Answers5

Linked