CODEWITHSUNDEEP
htmlcssxhtml
Icode4food
Icode4food

Reputation: 8704

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

Upvotes: 73

Views: 27555

Answers (5)

Lionel T
Lionel T

Reputation: 1597

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.

Upvotes: 0

Marc Ordinario
Marc Ordinario

Reputation: 19

I fixed mine by adding 

a {
 display:inherit
}

Hope this helps

Upvotes: 1

christk
christk

Reputation: 872

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

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186662

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

Upvotes: 15

Quentin
Quentin

Reputation: 944010

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}

Upvotes: 126

Related Questions