Padding around images using Tiddlywiki code

[LoB]

Hello. I'm a first time poster and relatively new to Tiddlywiki. I
know nothing about coding language but the utility of Tiddlywiki is so
great that I had to dive in and try to make the best of it. There are
a lot of great tutorials online but I haven't been able to find a
solution to this.

I'm beginning to learn some of what I need to know using Tiddlywiki
code ( I don't know why it works, but I know when I mess it up :P) but
I don't understand how to combine say, CSS and Tiddlywiki code, or if
you even can.

I have an image in a tiddler (directly linked from my photobucket
account). I have it floating to the left of the tiddler using this
[<img[url.jpg]]

What I want to do is add a little padding between the right side of
the image and the text. One excellent page touched on a few different
ways of placing an image and floating it, but didn't show how to write
the code to add padding in Tiddlywiki code.

Can someone please tell me how to do that?

Better yet, is there some code, CSS or otherwise, that will pad all
images? Or do I have to specify a line for each direction (floating
right and floating left)?

Any help is much appreciated.

-LoB

[Eric Shulman]

> I have an image in a tiddler (directly linked from my photobucket
> account). I have it floating to the left of the tiddler using this
> [<img[url.jpg]]

> What I want to do is add a little padding between the right side of

> Better yet, is there some code, CSS or otherwise, that will pad all
> images? Or do I have to specify a line for each direction (floating
> right and floating left)?

To pad all images (floating or otherwise), in your [[StyleSheet]],
add:
.viewer img { padding-left:1em; padding-right:1em; }
or
.viewer img { padding:0em 1em 0em 1em; }

This will automatically add left AND right padding to every image that
appears inside a tiddler's 'viewer' area.

If you want to control left and right padding separately, you could
add this to [[StyleSheet]]:

.leftpad img { padding-left:1em; }
.rightpad img { padding-left:1em; }

Then, in your actual tiddler content, you can write:

{{rightpad{[<img[file.jpg]]}}} This image has right padding and is
hard against left margin

and

{{leftpad{[>img[file.jpg]]}}} This image has left padding and is hard
against right margin

HTH,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

[LoB]

Great! Thank you so much for the quick response and the help Eric.

Can I add both the code for padding all images and the code for
padding left and right images separately to my [[StyleSheet]], so that
all of the images will be padded unless I choose to make the image
hard against the margin through the tiddler content?

[Eric Shulman]

> Can I add both the code for padding all images and the code for
> padding left and right images separately to my [[StyleSheet]], so that
> all of the images will be padded unless I choose to make the image
> hard against the margin through the tiddler content?

yes. exactly.

enjoy,
-e

[LoB]

Awesome. Thanks again for the help!

[Eric Shulman]

errata:

.leftpad img { padding-left:1em; }
.rightpad img { padding-left:1em; }

should be:
.leftpad img { padding-left:1em; padding-right:0em; }
.rightpad img { padding-right:1em; padding-left:0em; }

-e