There is always a little space under images inside a table

Question

I'll provide direct link for people who wants to see it live.

Just hover one of the table listing and you'll see there is always a small space under images. I've tried padding, margin, searched stackoverflow for it and used border spacing, border collapse etc. but nothing helped so far.

I would like your help. What's the problem and what am I missing?

score 25 · Accepted Answer · answered Jan 31 '13 at 12:45

25

Problem isn't the table actually, img tags are inline elements and have that bottom spacing by default (something with line-height I guess, don't really know why).

Solution: div.browseBuilds tr.browseBuilds_piece img { display: block; }

answered Jan 31 '13 at 12:45

Simon

7,182
2
26
42

1

Thanks, it solved the issue. Going to select it as answer in 2 minutes. – Lyver Kinkki Jan 31 '13 at 12:48
2

`img` tags have no default bottom spacing. Just the whitespace characters in the HTML source code are displayed, because `img` is an inline elment by default. – Lumen Jan 31 '13 at 12:54
1

@LyverKinkki See other possibble fixes on a similar question: http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image/13961130 – Pavlo Jan 31 '13 at 14:33
When I use "display:block" property, it is working fine but my text-align: center is not working. I am creating an email template. – Ankit Parmar Sep 16 '21 at 07:35

score 4 · Answer 2 · answered Jan 31 '13 at 12:45

4

Add display: block to img.

    .browseBuilds_piece img{
       display:block
     }

answered Jan 31 '13 at 12:45

Michal

325
2
7

score 1 · Answer 3 · answered Jan 31 '13 at 12:39

1

User cellpadding="0" and cellspacing="0" as a table attribute.

<table border="0" cellpadding="0" cellspacing="0" >

answered Jan 31 '13 at 12:39

Sudip Pal

2,041
1
13
16

How can I write those attributes in css? Edit: I applied it, but it is still the same. – Lyver Kinkki Jan 31 '13 at 12:44
table { border-spacing:0; border-collapse:collapse; } – Sudip Pal Jan 31 '13 at 12:46

score 1 · Answer 4 · answered Jan 31 '13 at 12:42

1

The problem could be cellspacing and cellpadding but im not sure ... really good tool for this stuff is firebug , inspect element you will see all used styles etc.. or try to fix td height on 50px like your img

answered Jan 31 '13 at 12:42

Miko

47
1
12

I've got firebug installed on my Firefox but I don't know how to inspect something. I'm using Firefox's default inspect function. Can you tell me a bit about it? – Lyver Kinkki Jan 31 '13 at 12:43
click with right mouse button on element and than chose inspect element in firebug there will be blue icon ;-) than firebug will appear with html structure and if you click on some element styles will appear on right side – Miko Jan 31 '13 at 12:47

score 1 · Answer 5 · edited May 23 '17 at 12:01

1

See this similar question. Because img is an inline element, whitespaces in the HTML source code around the img tag matter and will be displayed. Either remove the whitespaces from the code

<td style="vertical-align: middle;"><img src="./themes/default/images/builds/eski.jpg"></td>

or display the img as a block element, as Michal has pointed out.

edited May 23 '17 at 12:01

Community

1
1

answered Jan 31 '13 at 12:50

Lumen

3,554
2
20
33

I think vertical-align: middle is a good property to remove whitespace. text-align: center is not working while I am using display: block – Ankit Parmar Sep 16 '21 at 07:36

There is always a little space under images inside a table

5 Answers5