如何删除一系列图像的内边框并在css中保持外边框连续？

Question

I have a series of images that I want have border around. I don't want borders in between the images but when I set borders of the middle images to 0, I get a gap between the top borders .

So something like this, with many images in the middle.

 _____
|_____| 

I've tried setting the padding, but since my images take different shapes, I can't have so many special cases for each shape.

How do I remove the gaps but still keep a single continuous border around a shape of images.

Edit: I'm trying to make a game where if a person selects a picture, it highlights all the ones similiar to that around it. Something like bejeweled, where if you highlight a colour, the same colour tiles highlight themselves. Images are all the same size, layed out in a grid pattern.

Answer 1

Remove all borders from the images and wrap them in a <div /> :

<div class="image-wrapper">
  <img />
  <img />
  ...
  <img />
</div>

Then just apply CSS to it:

.image-wrapper {
  border: 8px solid rgb(220, 220, 255);
}