<figure> добавляет нежелательные поля/заполнение

Question

Я пытался использовать элемент <figure>. Пока что так хорошо и, надеюсь, это сделает мой сайт более оптимистичным.

Но! Есть эта вещь, где она добавляет дополнительный margin/padding (хотя все они заданы как margin:0; padding:0;). Это не <figcaption>, потому что это находится над <img> в пределах <figure>.

Может ли кто-нибудь объяснить мне, как это исправить? После некоторых исследований я знаю, что если вы замените <figure> на обычный <div>, он будет вести себя нормально. Но нет необходимости в элементе <figure>.

Немного Fiddle для тех, которые просят за него: https://jsfiddle.net/jn2geLmy/1/

Answer 1

Вы должны установить свои изображения в нем figure с вроде как block так:

display: block; 

, чтобы удалить нежелательный запас. См. Это fiddle

Answer 2

Добавить display:block на изображении на рисунке.

Fiddle