I’ve been trying to use the <figure>
-element. So far so good and hopefully it’ll make my website more SEO.
But! There is this thing where it adds an extra margin/padding (although all of them are set as margin:0; padding:0;
). It’s not the <figcaption>
because that’s placed above the <img>
within the <figure>
.
Can anyone explain me how to fix this? After some research I know that if you replace the <figure>
with a regular <div>
, it’ll behave normally. But than there’s no need for the <figure>
-element at all.
A little Fiddle for the ones that ask for it: https://jsfiddle.net/jn2geLmy/1/
2
Answers
You should set your images inside the
figure
s like asblock
like so:to remove the unwanted margin. See this fiddle
Add
display:block
in image in figure.Fiddle