How come there is 4px of extra padding appearing under my <a> element?

Question

H3LLO,

For some reason there is 4px of extra padding appearing under the a element. I am seeing this manifest in both Firefox and Chrome. I remember seeing this phenomenon on Flickr in its early days except it was a blue bar that appeared under s wrapped in elements.

Here is a link to the example code that illustrates my problem. The background: of a has been colored red and the border: of img has been colored gray. As you can see, the a element is extending around 4px below the img.

To see the code just press the "Edit using JSBIN" link that appears at the top right corner when you hover over the window.

Any ideas on how to get rid of a element's extra bottom padding?

Thanks
Adam

Could

Answer 1

add vertical-align:bottom; to your img css properties.

Lamellicorn

Yes. Images are not on the same baseline as text. – Overset

thanks @pixeline. it worked. @Overset so images always hover over the baseline by default? – Could

@Could baseline is default for all elements – Monia

Answer 2

a {display: inline-block}
img {display: block}

Images are rendered inline by default and you need to add display: block or vertical-align: bottom to fix the issue.

Hindemith

Answer 3

The only working way for me is to "remove" the margin is wrapping the image with div and set the size of div exactly the same as the image.

<div style="width:64px; height:64px">
  <img src ='image.png' style="width:64px; height:64px" />
</div>

Quarles

Answer 4

Also you can set to tag "display: flex": a {display: flex}

Harris

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Amalle

Answer 5

I'm not positive why it occurs, but you could try YUI Reset to fix it.

Tanager

is it best practice to include the YUI Reset at the beginning of all my CSS files? – Could

I believe it's better to link the YUI Reset seperately, before you link your own CSS file(s) – Tanager