kepub epub3. Avoiding blank spaces caused by images

[Acopdegarrotix]

In order to avoid blank spaces when images are pushed to next page (kePub ePub3), I've tried to use code based on RbnJrg's suggestion, and it worked beautifully in Calibre's viewer.

Originally Posted by RbnJrg

Yes, is what I said in my previous post. Watch the images I included there, and how the text moves when the font size is changed to avoid blank spaces. With epub3 the fragmentation is completely avoided. Use something like this:

  <figure>
    <img src="../Images/Your_image.jpg" alt="" style="width:100%"/>

    <figcaption>Fig.1 - Blah, blah, blah</figcaption>
  </figure>

and

figure {
  float: left;
  margin: 1em 0;
  padding: 4px;
  -webkit-column-break-inside: avoid !important; /* for webkit ereaders */
  break-inside: avoid !important;  /* for the rest of ereaders */
}

figcaption {
  font-style: italic; /* if you wish */
  padding: 2px; /* set here the measure you wish */
  text-align: center; 
}

However, all my attempts to have it working on my Kobo Sage have failed utterly, so I'm wondering whether I'm making some sort of mistake or it is simply that Kobos don't honor this code.

Here's the code I'm using.

In the CSS:

figure {
  margin: 1em 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  display: inline-block !important;
  float: left !important;
  width: 100%;
  text-align: center;
  -webkit-column-break-inside: avoid !important;
  -webkit-page-break-inside: avoid !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

img {
  max-width: 80%;
  max-height: 80vh;
}

And in the xhtml:

  <figure>
    <img alt="" src="../Images/colour_01a.jpg"/>
  </figure>

Many thanks in advance to you all for your help.

Ernest

[icallaci]

Have you tried margin: 0; instead of margin: 1em 0;?