Как убрать расстояние между картинками по горизонтали и вертикали?

Question

[screbok]

Здравствуйте.

Как убрать расстояние между картинками по горизонтали и вертикали? И почему оно вообще присутствует? Смотрел через браузерный инспектор - ничего не увидел, никаких отступов нет, но по факту есть.

Вот код, там пара комментариев.

https://jsfiddle.net/3cemweud/3/

Comments

[Александр Лысенко]

Известный баг/явление с отступами у inline элементов. Побеждается несколькими способами. Например, float: left или отсуствием переноса строки в верстке:

НЕ так

<img src="">
<img src="">

а ТАК
<img src=""><img src="">

[screbok]

AlexanderZe: спасибо, в ответы напишите.

Answer 1

[Александр Лысенко]

Известный баг/явление с отступами у inline элементов. Побеждается несколькими способами. Например, float: left или отсуствием переноса строки в верстке:

НЕ так

<img src="">
<img src="">

а ТАК
<img src=""><img src="">

Answer 2

[Алексей Скляров]

Для картинки используйте:

img {
float:left;
}

А расстояние между ними появляется потому что это строчные элементы. Для них всегда автоматически ставится небольшой отступ слева и справа.

Comments

[screbok]

И этим магическим отступом нельзя управлять? Для чего так?

Answer 3

[Ден Тоцкий]

т.к. строчные элементы, css между ними автоматически подставляет пробел. Его можно убрать просто указав размер шрифта в 0 для родительского элемента

figure {
  font-size: 0;
}

или использовать flexbox

figure {
  display: flex;
  flex-wrap: wrap;
}

Comments

[webhero]

Согласен. Давно уже использую флексы повсеместно, дает самый лучший результат