Как убрать расстояние между картинками по горизонтали и вертикали?
т.к. строчные элементы, css между ними автоматически подставляет пробел. Его можно убрать просто указав размер шрифта в 0 для родительского элементаfigure {
  font-size: 0;
}
или использовать flexboxfigure {
  display: flex;
  flex-wrap: wrap;
}
Для картинки используйте:img {
float:left;
}
А расстояние между ними появляется потому что это строчные элементы. Для них всегда автоматически ставится небольшой отступ слева и справа.