White space at bottom of anchor tag

views:

answers:

+2 Q:

White space at bottom of anchor tag

I have an tag surrounding an image. I have a border set on the div that the tag is in. I have both margin and padding set to 0 but for some reason my tag is still about 3 pixels taller than my image. This leaves a bit of space between the image and the border, which destroys the look that I want to accomplish.

What am I doing wrong? I have tested in both FireFox and Chrome with the same results. Thanks

+1 A:

The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the vertical-align with CSS.

David Dorward 2010-07-07 18:13:55

More specifically, `img{vertical-align: bottom}`

Álvaro G. Vicario 2010-07-07 18:17:29

That is exactly what is happening. The issue is resolved if I do `vertical-align:bottom;` or `display:block;`. Which is the better solution?

Icode4food 2010-07-07 18:18:20

Neither is better, they just have different implications. Block elements have line breaking around them and other fun side effects.

David Dorward 2010-07-07 18:38:23

http://work.arounds.org/mysterious-white-space-gap-under-image-elements/

display:block is sufficient for this if it has no siblings.

meder 2010-07-07 18:20:10

Interesting, so the real culprit is the image tag, not the <a> tag.

Icode4food 2010-07-07 18:28:07

That is what David pretty much said, any inline element will have space for descenders. It's the natural behavior.

meder 2010-07-07 18:29:37

ansaurus

tags:

views:

answers:

White space at bottom of anchor tag

related questions