White space at bottom of anchor tag

Question

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

score 122 · Accepted Answer · edited May 15 '14 at 17:02

122

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: img{vertical-align: bottom}

edited May 15 '14 at 17:02

Marcin

48,559
18
128
201

answered Jul 07 '10 at 18:13

Quentin

914,110
126
1,211
1,335

11

More specifically, `img{vertical-align: bottom}` – Álvaro González Jul 07 '10 at 18:17
1

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 Jul 07 '10 at 18:18
Neither is better, they just have different implications. Block elements have line breaking around them and other fun side effects. – Quentin Jul 07 '10 at 18:38
The critical one is setting vertical-align to bottom. 9 years passed after this question asked, but I am still curious on why vertical-align affects the height – cytsunny May 17 '19 at 02:28

score 15 · Answer 2 · edited Aug 16 '17 at 15:11

15

display:block is sufficient for this, if the element has no siblings.

edited Aug 16 '17 at 15:11

Cody Gray - on strike

239,200
50
490
574

answered Jul 07 '10 at 18:20

meder omuraliev

183,342
71
393
434

5

Interesting, so the real culprit is the image tag, not the tag. – Icode4food Jul 07 '10 at 18:28
That is what David pretty much said, any inline element will have space for descenders. It's the natural behavior. – meder omuraliev Jul 07 '10 at 18:29
both "vertical-align:bottom" and "display:block" will remove "extra white space" at bottom – aztack Oct 31 '14 at 07:53

score 2 · Answer 3 · answered Jan 09 '20 at 11:51

2

I had the same issue and i fixed it by adding to the 'a' tag display: block; and font-size: 0px;

answered Jan 09 '20 at 11:51

christk

834
11
23

score 2 · Answer 4 · edited May 10 '20 at 08:36

2

I fixed mine by adding

a {
 display:inherit
}

Hope this helps

edited May 10 '20 at 08:36

David Buck

3,752
35
31
35

answered May 10 '20 at 08:17

Marc Ordinario

21
1

score 0 · Answer 5 · answered Dec 23 '21 at 17:37

December 2021 Solution

As announced by several people, css :has() selector was implemented. So this issue could be solved for anchors which "has" images as a direct child:

a:has(> img) {
  font-size: 0;
}

At the moment I am writing this reply, it is only supported by Safari TP but probably this table will be greener soon.

White space at bottom of anchor tag

5 Answers5

December 2021 Solution

Linked

Related