Display errors inside FlexTable - how to get rid off them?

[Hans]

Recently there was a display error difficult to track down in my app: FlexTable cells were 4px higher than expected (regarding the content box). When I eventually set line-height: 0 the padding/margin/you name it evaporated.

So I guess there's a text node consisting of white space or a line break in these cells and I don't have a clue why. Or the image itself is causing this (creating a new line in terms of HTML).

I do it straighforwardly:

FlexTable ft = new FlexTable();
Image i = new Image(url);
ft.setWidget(row,col,i);

resulting in the cell being rendered 4px higher than the image itself - no paddings, borders, margins applied as checked with Chrome's built-in DevTools.

I'm very curious to know why this happens because it does not happen on another page doing the exact similar thing ... Is this by design (of HTML/Chrome/CSS/...)? Should I give XHTML a try instead? Is there a way to control all nodes with GWT?

[Hans]

I changed the fix to use display: block for images inside table cells instead of messing with line-height which seems a cleaner solution.
Waiting for widespread CSS3 support to fight the underlying problem of placing inline content ...