skip to Main Content

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


  1. You should set your images inside the figures like as block like so:

     display: block;
    

    to remove the unwanted margin. See this fiddle

    Login or Signup to reply.
  2. Add display:block in image in figure.

    Fiddle

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search