Unwanted Gaps In Tables

From CSS Discuss

Jump to: navigation, search

When adding images inside table cells you may have realised that some browsers will add whitespace below the images. This is caused by images being inline elements and catering for characters that extend below the baseline, like g or p. You can work around this issue by simply setting the image display to block:


img {display:block;}

If that fix is not possible you can also use vertical align:

img {vertical-align: bottom;}

More and more in-depth information:

http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Personal tools