Gap between Images in CSS

Question

I just got inspired and tried to recreate an effect I have seen on Codrops, but now I am stuck. Between my images is a small gap which is not going away even when I set the margin and the padding to 0. Here is a CodePen with my problem

I would be grateful if someone could help me. Thank you!

[1]: http://codepen.io/anon/pen/pvrMKm

Answer 1

You need to set the images to have a block value:

figure img {
  display:block;
}

CodePen

Answer 2

You can set the font-size: 0 to parent ul and set the desire one in child li elements like:

ul {
  font-size: 0;
}

ul li {
  font-size: 18px;
}

This happens because in inline elements white space between them become actual space in html.

codepen