Menu icon Foundation
Unwanted mysterious margin around image inside <figure> tags.

Hello

I have an image and caption inserted in my Foundation 5 page using the 'figure' and 'figcaption' tags (please see included HTML and CSS code below). This section is inserted in between two paragraphs within my page, to provide a centred image within the page text.

This all works well, apart from some mystery margin that is occurring around the image which makes it too small when the browser window width is reduced. Rather than the edge of the image lining up with the edge of the text, it is in fact narrower, so when the browser window width is reduced, the image is that much smaller still.

I have found that if I insert a class of 'row' in the opening 'figure' tag, it removes the extra margin AND the standard Foundation margin, so that when the browser window width is reduced, the image now touches the edge of the browser window - unlike the text above and below it, which maintains the standard Foundation margin to the edges of the browser window.

I have uploaded two images that show both extremes: the too-large image margin, and the non-existent image margin, created by using the class of 'row' in the opening 'figure' tag. As you can see, the image won't line up with the text, which makes it either unnecessarily small in the mobile-sized browser window, or too large and touching the edges of the browser window.

I have spent hours on this trying all sorts of CSS and by adding various classes into the figure, span and figcaption tags, but I can't get it to do what I want it to. I can either have too much margin or no margin. It simply won't allow the image edges to line up with the paragraph text edges.

Would anyone happen to know how I can get my image edges to line up with the text as the browser window width is reduced?

Thanks very much in advance if you can help.

    <figure>
        
        <span>
          <img src="http://placehold.it/700x525&text=[img]">
        </span>

        <figcaption>
        Caption for the above image.
        </figcaption>
    
     </figure>
            

         

.article-full figure {
  text-align: center;
}
.article-full figure img {
  margin: 0 auto;
  margin-top: 3.0em;
  display: block;
  border: 0px solid #303030;
}
.article-full figure figcaption {
  margin-top: 1.5em;
  margin-bottom: 2.0em;
  margin-left: 0em;
  margin-right: 0em;
  font-style: italic;
}
       

         

Example

Example2

Example3

figurefigcaptionhtmlunwanted marginimageimg

Hello

I have an image and caption inserted in my Foundation 5 page using the 'figure' and 'figcaption' tags (please see included HTML and CSS code below). This section is inserted in between two paragraphs within my page, to provide a centred image within the page text.

This all works well, apart from some mystery margin that is occurring around the image which makes it too small when the browser window width is reduced. Rather than the edge of the image lining up with the edge of the text, it is in fact narrower, so when the browser window width is reduced, the image is that much smaller still.

I have found that if I insert a class of 'row' in the opening 'figure' tag, it removes the extra margin AND the standard Foundation margin, so that when the browser window width is reduced, the image now touches the edge of the browser window - unlike the text above and below it, which maintains the standard Foundation margin to the edges of the browser window.

I have uploaded two images that show both extremes: the too-large image margin, and the non-existent image margin, created by using the class of 'row' in the opening 'figure' tag. As you can see, the image won't line up with the text, which makes it either unnecessarily small in the mobile-sized browser window, or too large and touching the edges of the browser window.

I have spent hours on this trying all sorts of CSS and by adding various classes into the figure, span and figcaption tags, but I can't get it to do what I want it to. I can either have too much margin or no margin. It simply won't allow the image edges to line up with the paragraph text edges.

Would anyone happen to know how I can get my image edges to line up with the text as the browser window width is reduced?

Thanks very much in advance if you can help.

    <figure>
        
        <span>
          <img src="http://placehold.it/700x525&text=[img]">
        </span>

        <figcaption>
        Caption for the above image.
        </figcaption>
    
     </figure>
            

         

.article-full figure {
  text-align: center;
}
.article-full figure img {
  margin: 0 auto;
  margin-top: 3.0em;
  display: block;
  border: 0px solid #303030;
}
.article-full figure figcaption {
  margin-top: 1.5em;
  margin-bottom: 2.0em;
  margin-left: 0em;
  margin-right: 0em;
  font-style: italic;
}
       

         

Example

Example2

Example3
Richard Jesudason almost 5 years ago

is your figure wrapped in a '.columns' which the text is not? If so it's probably padding.

Otherwise, got a link?

Although you've provided a lot of detail, it's difficult to debug without context.

Michael almost 5 years ago

Hello, and thank you for your reply.

The figure was just as I posted the code, so no 'columns' class at all, apart from various other outer div tags, but those weren't causing problems with the text margins, so the problem seemed to be isolated at the point the figure tags were used.

I have an update, and I have managed to solve the problem, but I had to get rid of the outer 'figure' tags and replace them with 'div' tags instead. Then I updated my CSS so it looked for 'div' instead of 'figure'. It works perfectly with a 'div' insterted! I'm rather annoyed as I only used 'figure' tags because I thought it was the proper way to implement HTML5 for inserting images in this way.

Below, I have posted my new code and CSS that works, just in case this is of some help to anyone else who experiences the same problem.

  <div>
        <span>
          <img src="http://placehold.it/700x525&text=[img]">
        </span>

        <figcaption>
        Caption for the above image.
        </figcaption>
      </div>
.article-full div {
  text-align: center;
}
.article-full div img {
  margin: 0 auto;
  margin-top: 3.0em;
  display: block;
  border: 0px solid #303030;
}
.article-full div figcaption {
  margin-top: 1.5em;
  margin-bottom: 2.0em;
  margin-left: 0em;
  margin-right: 0em;
  font-style: italic;
}



Michael almost 5 years ago

I have just updated my original post to include a third image showing that it is now working, with the desired image margin that matches that of the paragraph text.

Just to recap, I achieved this and solved the problem by getting rid of the 'figure' tags and replacing them with 'div' tags instead.

I will need to sort out my CSS actually, as it now causes my paragraph text to be centred due to inadvertently applying the centring instruction 'text-align: center;' to all divs, rather than just the one containing my image. The main problem is solved though, and I can fix the new CSS issue easily enough.

Rafi Benkual almost 5 years ago

Foundation has no CSS for <figure> tags. It could be a normalize issue.

See https://github.com/necolas/normalize.css/pull/262