CODEWITHSUNDEEP
htmlcssimagehyperlinkpadding
pylonicon
pylonicon

Reputation:

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

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

Upvotes: 22

Views: 8434

Answers (5)

Andrii
Andrii

Reputation: 1

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

Upvotes: 0

Terry Lam
Terry Lam

Reputation: 1085

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>

Upvotes: 0

Drew Wills
Drew Wills

Reputation: 8446

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

Upvotes: -2

mironcatalin
mironcatalin

Reputation: 91

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.

Upvotes: 9

pixeline
pixeline

Reputation: 17974

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

Upvotes: 47

Related Questions