When we write an article in our blog, sometime we insert images/photos to support our article. And this can be done easily, no matter what blogging platform we use. For example, using WordPress we can upload image using uploader tool, and with few clicks the image will go to entry editing screen. For better formatting purposes, we can manage how inserted objects should be displayed: floating left, right or in the center. For example, see the image below:

The above image is constructed using HTML codes like this:

<p><img src="/path/to/image/file.jpg" alt="Alternate Text" align="left" /></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque mollis. Sed ut eros at ante congue vehicula.

Or, something like this:

<p><img src="/path/to/image/file.jpg" alt="Alternate Text" style="float: left;" /></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque mollis. Sed ut eros at ante congue vehicula.

There are many alternatives to have such output. We can use style="float: left;", align="left", align="right", etc. Is it what you want? Probably, yes. But, do you notice that the text is attached to the image? Do you want to insert some space there so that it can please your readers? Now, let’s compare with this image.


See the difference? There is a whitespace between image and text. It looks better, right? It’s not difficult to do it, and there are some simple methods we can use. Here are some.
Method #1: Using inline styles. Inside your <img /> tag, you can insert something like this: style="float: left; margin-right: 15px;". So, the full tag will be like this. <img src="/path/to/image.jpg" alt="text here" style="float: left; margin-right: 15px;" />. This is just an example, do more experiment to have the best result.
Method #2: Control from stylesheet. This can be a quick solution if you do not want to use the first method, for example because you do not want to waste your time editing all entries one by one. For example, you have align="left" or align="right" inside your <img /> tag in your posts. If so, just edit your stylesheet file, add this code for example:

img[align="left"] { margin-right: 15px; }
img[align="right"] { margin-left: 15px; }

All your images should have a better placement now. You can — of course — modify those code, just get the best combination.
Method #3: More on the stylesheet. Sometimes, there are another HTML tags inside <img /> tags. For example, if you use WordPress 2.5 uploader tool, and you insert an image directly into your post, you will have HTML tags like this:

<img class="alignright size-medium wp-image-123" style="float: right;" title="tshirt_nobita" src="/path/to/file.jpg" alt="" />

See the differences? There are another more complex attributes there like: alignright, size-medium, and wp-image-123. Don’t get confused. It’s a good thing because we are not only able to use a single stylesheet formatting, we can even add styles to a spesific image. From the code above, we can add these lines into our stylesheet file.

img.alignright { float: right; margin-left: 20px; }
img.size-medium { border: 5px solid #000; }
img.wp-image-123 { border: 10px solid #cc0000; }

Using those three lines — we use the all together, we will have our own rule for image styling:

1. All images having class="alignright" will float right, and have 20px space on the left.
2. All images having class="alignright size-medium" will float left, have 20px space on the left, AND will have a solid-5px-black-border.
3. All images having class="alignright size-medium wp-image-123" will be displayed using the first rule AND it will have a solid-10px-red-border.

Those are some examples. It’s easy, right? I hope it is. :)