How to add space around images in WordPress

Wordpress LogoI dont claim to be a guru at technology related items, but do have a reasonable amount of knowledge on certain aspects. Over the last few weeks I have had 4 or 5 emails from visitors to asking how I create space around images when they are surrounded by text.

There are two ways of achieving this look and it depends on how confident you are at editing your blog using HTML tab.

Entering Spacings without using HTML. The simplest way to achieve this is by using the options for images when using the visual method. Firstly upload and enter your image in the usual way and once it is shown in the Post editing window click on the image. Around the image will appear the selection markers with two icons on the top. The left image is for the image properties and the right is for deleting the image from the post. Select the left icon and you will be shown the details of the image you have selected including size, alignment and titles. At the top of the pane is a tab that says ‘Advanced Setings’. Click this and you will be confronted with a new pane showing options like source, border, style etc.

In this pane there are 2 boxes called vertical space and horizontal space, in here enter the amount of space you require around each side of the picture, I tend to use 5 pixels at most in horizontal space. Once you have made your selection select update and it will alter the image spacing.

Entering Spacing with HTML. The second method like I said depends on your level of HTML knowledge. Firstly in the HTML pane you need to locate the image you wish to make the changes to.

The HTML will look something like this :

<a href=”………/wp.jpg”><img title=”wp” src=”………/wp-150×150.jpg” alt=”Wordpress Logo” width=”150″ height=”150″ /></a>

To enter the spaces you use the margin HTML code as shown below in bold.

<a href=”………/wp.jpg”><img style=”margin-right: 5px; margin-left: 5px;” title=”wp” src=”………/wp-150×150.jpg” alt=”Wordpress Logo” width=”150″ height=”150″ /></a>

If required you can also enter margins for the top and bottom if necessary.

Hope this helps a few people who have asked for this guide.


Related Posts Plugin for WordPress, Blogger...
Both comments and pings are currently closed.

Comments are closed.

Get Adobe Flash player