HTML/CSS: padding with image link

Question

I've built a minimal example for the following problem: If I link an image, there is a small padding at its bottom although the padding of the link and image element is set to zero. I've applied a green background color to make the padding visible. So, where does the padding come from? I tested it with Safari 11 and Firefox 58.

Thank you in advance!

#link {
  padding: 0;
  margin: 0;
  background-color: green;
}

#image {
  padding: 0;
  margin: 0;
}

<a id="link" href="index.html"><img id="image" src="https://lorempixel.com/50/50/" ></a>
<img id="image" src="https://lorempixel.com/50/50/">

result: browser result

score 2 · Answer 1 · edited Feb 14 '18 at 12:07

2

try it with font-size:0

#link {
   padding: 0;
   margin: 0;
   background-color: green;
   font-size:0;
}

#image {
   padding: 0;
   margin: 0;
}

<a id="link" href="index.html"><img id="image" src="img/test.jpg"></a><img id="image" src="img/test.jpg">

edited Feb 14 '18 at 12:07

Temani Afif

245,468
26
309
415

answered Feb 14 '18 at 12:00

Pons Purushothaman

2,225
1
14
23

Works, but breaks the page that I'm working on, which is based on relative sizes in em. Thanks nevertheless. – xaverius Feb 14 '18 at 13:46

score 1 · Answer 2 · edited Feb 14 '18 at 12:07

Apply vertical-align: top; to the image, this will fix it. The reason for what you describe is that the image as an inline element otherwise is aligned at the baseline, and the space below the baseline remains visible. Aligning it to the top will fill the whole parent element.

#link {
   padding: 0;
   margin: 0;
   background-color: green;
}

#image {
   padding: 0;
   margin: 0;
   vertical-align: top;
}

<body>
   <a id="link" href="index.html"><img id="image" src="http://placehold.it/40x30/fb6"></a>
   <img id="image" src="http://placehold.it/40x30/fb6">
</body>

HTML/CSS: padding with image link

2 Answers2