White border around images only when linked to href?

Question

I’ve been puzzling over this for a while. I’d like to have row of 4 images which are links to other pages. The images next to each other form a block of colour and therefore I don’t want and space between them.

I have been able to get the images to work perfectly by using a class in CSS to remove the border, padding and margin or just with html on each image.

As soon as I add the href to create the link, a white border appears around the image and obscurs the adjacent images. I can’t remove the border in either html or CSS whenever the href is added. Where am I going wrong?

EDIT

Thanks for suggestions - but still no luck. I have the following:

HTML

<a href="LINK"><img class="testpage" src="IMAGE.jpeg" /></a><a href="LINK"><img class="testpage" src="IMAGE.jpeg" /></a><a href="LINK"><img class="testpage" src="IMAGE.jpeg" /></a>

CSS

.testpage {
  margin: 0;
  padding: 0;
  border: 0;
}


img, a {
  margin: 0;
  padding: 0;
  border: 0;
}

Can you provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) — Sumit Ridhal, Oct 16 '19 at 11:49
[How do I remove the space between inline-block elements?](https://stackoverflow.com/q/5078239/4642212), [Image inside div has extra space below the image](https://stackoverflow.com/q/5804256/4642212). — Sebastian Simon, Oct 16 '19 at 11:50
Possible duplicate of [Image inside div has extra space below the image](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — Sebastian Simon, Oct 16 '19 at 11:51

score 0 · Answer 1 · answered Oct 17 '19 at 20:57

Thanks for the help - as it turned out, I had the HTML and CSS correct, but was overridden by the theme CSS below.

/* Fixes linked images */
    .entry-content a img,
    .comment-content a img,
    .widget a img {
-webkit-box-shadow: 0 0 0 8px #fff;
box-shadow: 0 0 0 8px #fff;
}

I changed the 8px to 0px and now it allows me to set the spacing.

Not sure why this section of code is necessary though!

Sumit Ridhal · Answer 2 · 2019-10-17T06:12:15.567

-2

Hope this helps. The issue is not with the anchor.

.d-flex {
  display: flex;
}

<div class="d-flex">
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
<a href="LINK"><img class="testpage" src="https://dummyimage.com/200x200/000/fff" /></a>
</div>

edited Oct 17 '19 at 06:12

answered Oct 16 '19 at 11:51

Sumit Ridhal

1,211
3
9
28

It’s very unlikely that this fixes it. This CSS doesn’t remove the descender gap below the image. It also doesn’t remove spacing between images. – Sebastian Simon Oct 16 '19 at 11:55
thanks for the update, but still showing gaps between. it's like the later images overlap the previous ones. I'm try to add screen grab above – Jimbo Oct 17 '19 at 10:12

White border around images only when linked to href?

2 Answers2