1

I'm trying to remove all the padding/margin around the images in the bottom table of this PBWorks wiki page:

http://ja2v113.pbworks.com/w/page/29061905/Map%20Database%20Project%3A%20Azazel#view=page

However, there remains always a little bit of white space at the bottom of each image. At least in Chrome.

How do I get rid of this? If you look at the page "source" you can see I tried using CSS and HTML but haven't been successful.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
posfan12
  • 2,541
  • 8
  • 35
  • 57
  • possible duplicate of [Where did this white space came from?](http://stackoverflow.com/questions/9142921/where-did-this-white-space-came-from) – CBroe Jul 12 '15 at 00:55
  • I disagree with the possible duplicate; changing the vertical-align (as the accepted answer suggests) only changes which side the extra space will be, in OP's case. – Andrew Cheong Jul 12 '15 at 01:03
  • possible duplicate of [how to remove unwanted space between rows and columns in table](http://stackoverflow.com/questions/2279396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) – easwee Jul 12 '15 at 09:30

3 Answers3

2

Make block elements of the images:

img {
    display: block;
}
herrfischer
  • 1,768
  • 2
  • 22
  • 35
1

Add vertical-align: bottom or display-block to the images. Those are two very different solutions for the same problem.

The problem is that they are inline blocks now and aligned on the baseline of the text. The white space you see is the space between the baseline and the bottom line of the font.

You can solve this by adding vertical-align: bottom to align the image at the bottom of the font, eliminating the white space.

Or you can display the images as block elements. By doing that there is no text line at all inside the link, but only the block image, so baseline doesn't matter anymore.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
-2

In your case I don't think the issue has to do with inline vs block-level elements, nor vertical-align.

Try setting line-height to 0 on your <td>s.

Andrew Cheong
  • 29,362
  • 15
  • 90
  • 145
  • The problem would be that if there is a line-break the text would get unreadable because in one-line. – herrfischer Jul 12 '15 at 01:15
  • Odd, I changed the CSS directly via Chrome's Inspect to try both the `display: block` and `vertical-align` methods, and didn't work for me. (I checked that they were in effect via the Computed CSS tab.) I must have a wrong understanding of something. – Andrew Cheong Jul 14 '15 at 00:07