1

I have a table with 2 cells and <img> inside both.

I tried to use cellspacing:0 and cellpadding:0, valign="top", but none of them seem to solve my problem, I still have this annoying space between my cells. how can I solve this problem

Here's my jsfiddle http://jsfiddle.net/gbumubn3/

Ramon Vasconcelos
  • 947
  • 3
  • 14
  • 31

2 Answers2

2

The white space is because of the <img> not the <table> element. Because of it's display mode it's behaving like text and reserving some space for 'Descenders' which are the low-hanging parts of text for example the bottom part of a lower case 'y'.

For more on a 'descender': Typography Descenders, on Wikipedia

The basic solution:

The solution is to set the CSS style display:block on your <img> elements.

The 'elegant' solution:

You can implement a CSS rule to automatically set display:block on all images who are the only child of a table's <td> element:

td img:only-child {display:block}

Edit: You can also use the CSS attribute vertical-align to solve this issue whilst preserving display:inline-block.

Forked example:

Click here for JSFiddle example

Le-roy Staines
  • 2,037
  • 2
  • 22
  • 40
  • I like the `display:block` fix. It seems like a more logical fix than a vertical alignment. By the way, the default display for images is `inline-block`, not the `inline` that you implied. – Brian Stephens Nov 05 '14 at 14:49
1

The space is actually caused by the <img> tag. Take a look at this jsfiddle (I've added a red border to the table cells): http://jsfiddle.net/gbumubn3/13/

See this answer for more details.

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.

Community
  • 1
  • 1
soulprovidr
  • 754
  • 3
  • 14