Unwanted Space Using Figure Image

Support
#1

hi

I have started adding all of images in page content using the <figure> tag and it’s caption option as a better way to have text flow around the images. I have classes created in my CSS to handle different % widths, but I am finding that the bottom margin on the images means that every now and then, a line does not wrap correctly. I have margin-bottom: 0; set in the image class, but it still does not seem to alter things.

I have no bottom margin or padding set on the figure classes, but am still not finding how to remove that bottom space.

Here is an example of the CSS I have to date:

figure.left-40 { float: left; width: 40%; text-align: center; font-style: italic; font-size: smaller; text-indent: 0; border: none; margin: 4px 5px 0 0; padding: 0 5px 0 0; } img.scaled { display: block; width: 100%; border-radius: 10px; margin-bottom: 0; }

I only just added the margin-bottom to the img.scaled class, but it has made no difference. I even tried using an inline style on the image (style="margin-bottom: 0;"), but no luck there either.

Attached is an image of exactly what I am talking about

URL of the page is feastthailand.com/3-impressive-lookouts Any suggestions gladly accepted

Regards

#2

Hi There,

Thanks for writing in! Further you should be able to adjust using CSS line-height attribute.

Hope that helps.

#3

hi Midarshana

Thanks for your reply

Using line-height pulls the caption closer to the image, but has not seemed to affect the space after an image. Here is an image to show you what I mean. I have set a line height of 1em just as an extreme. Obviously the caption is too close to the image, but look at the space after, which should be filled with the next line of text.

Any suggestion as to how to resolve that issue? Is it possibly the line height of the body text in the post that need adjusting, reducing it slightly?

Thanks again

#4

Hi There,

That is being caused by the line-height vs font-size vs margin bottom of the text

So you can adjust according to your wishes by adding the following CSS with your own values.

p {
    margin-bottom: 0.1em;
    line-height: 1;

}

You can add to Cornerstone CSS to not affect the other pages.

Hope it helps

#5

Hi Joao

Thanks so much for your reply

Yep, that has nailed it. I can adjust to suits, so absolutely perfect

Rgards

#6

You are most welcome. :slight_smile: