Spacing issues

[holdit]

I have an e pub converted from the output of an .indd I had to do some css changes in margin for main paragraphs and everything else looks fine except the spacing between graphics.

The original file was compiled from an .indd using the articles panel in some instances the order of the articles is different as one page my have header.jpg
text, ad.jpg etc.while anothe page has text, a .jpg another .jpg and text.

So inbetween these instances the spacing could be bigger, besides going and adding space by hitting the return key which produces blank paragraphs is there a better way as I thought css but I would have to add spacing for each element, correct?

???
Thx HI

[RbnJrg]

Originally Posted by holdit

... but I would have to add spacing for each element, correct?

Not necessarily

Try the following:

1. Go to your css styleseet.

2. Seek in the css file if there is an "img" tag and if it is styled (you'll see something like:

img {
   ...;
   ...;

}

where "...;" means any property).

3. If you found the "img" tag, then add at the end of it the following:

img {
   ...; /* old entry */
   ...; /* old entry */
   margin-top: 1em;  /* new entry */
   margin-bottom: 1em;  /* new entry */
   margin-left: 1em;  /* new entry */
   margin-right: 1em;  /* new entry */
}

4. If you DIDN'T find the img tag, then add in some place of your stylesheet, the following entry:

img {
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 1em;
   margin-right: 1em;
}

Of course, instead of 1em you can try any others values at your will.

5. Save changes and see how the images are showed now.

Regards
Rubén

[holdit]

yes, that is exactly what I did and it worked fine now everything is spaced according to the main div that holds the imgs

thx

HI

[theducks]

Originally Posted by RbnJrg

Not necessarily

Try the following:

1. Go to your css styleseet.

2. Seek in the css file if there is an "img" tag and if it is styled (you'll see something like:

img {
   ...;
   ...;

}

where "...;" means any property).

3. If you found the "img" tag, then add at the end of it the following:

img {
   ...; /* old entry */
   ...; /* old entry */
   margin-top: 1em;  /* new entry */
   margin-bottom: 1em;  /* new entry */
   margin-left: 1em;  /* new entry */
   margin-right: 1em;  /* new entry */
}

4. If you DIDN'T find the img tag, then add in some place of your stylesheet, the following entry:

img {
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 1em;
   margin-right: 1em;
}

Of course, instead of 1em you can try any others values at your will.

5. Save changes and see how the images are showed now.

Regards
Rubén

margin: 1em;

works (shortcut: when all values are the same)

[RbnJrg]

Originally Posted by theducks

margin: 1em;

works (shortcut: when all values are the same)

Yes, I know the shorthand form of the margin property And also you can use the shorhand form even when all margins are different -i.e. margin: 1em 0 2em 0.5em-. But I wrote the properties separately because maybe the OP wouldn't want all margin equals (perhaps if images were left floated he would prefer margin-left: 0). By writing the properties of that way, I gave him the chance to change any of them without needing for him to know css (besides, of that way it easier to me than write -i.e. margin: 1em 0 2em 0.5em- and to explain it).

[phossler]

Yes, I know the shorthand form of the margin property

I tend to prefer the longhand version of these kinds of things since it helps me remember the options and order better, but is there any performance impact from spelling them out?

Paul

[theducks]

Originally Posted by phossler

I tend to prefer the longhand version of these kinds of things since it helps me remember the options and order better, but is there any performance impact from spelling them out?

Paul

Not that I know.

Shorthand starts clockwise at 12:00
1 value = all
2 values = top-bottom, sides
4 (you better be able to guess this )

[phossler]

4 (you better be able to guess this

Oh, sure ... leave me the hard ones

Shorthand starts clockwise at 12:00

But this was something that I hadn't thought about / realized

Paul