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

H3LLO,

For some reason there is 4px of extra padding appear开发者_开发知识库ing 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

---

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

---

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.

---

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>

---

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