This is not a big issue but I'm curious about this.
I have an image in my epub ebook and it's displayed by using an
img tag. This tag is inside a
p element and I try to move the image around by styling the
p element. For example, my
p element for the image is between two
p elements which are for the text. I want to add margin between text and image but I can't do it by using
em as my unit. It works fine with
%,
pt and
px but not with
em. Why
em doesn't work? Here are the code examples:
XHTML code:
Code:
<p class="text">blaablaablaa</p>
<p class="image">
<img src="images/image.jpg" alt="image"/>
</p>
<p> class="text">blaablaablaa</p>
CSS code (from InDesign's EPUB export):
Code:
p.image {
line-height: 0.00em;
font-size: 0.00em;
margin-bottom: 0.00em;
margin-top: 10.00em;
text-indent: 0.00em;
margin-right: 0.00em;
margin-left: 0.00em;
text-align: center;
font-weight: normal;
font-style: normal;
color: rgb(0,0,0);
}
If I change
margin-top: 10.00em; to
margin-top: 10.00%; it will work. Why? Also padding doesn't work with
em. I don't want to set the margins by editing
p.text.