How to get nice spacing round images in WordPress

When you add images to a post or page using ‘Add Media’, WordPress jams them pretty tight up to the text.

image spacing graphicYou can tell it to align the image left, right or centre, but you can’t control the spacing. You can see how that ends up in the image opposite.

I don’t like that as a piece of visual design, and it’s not the best experience for the reader.

So I’ve adopted a standard operating procedure of setting the spacing manually for each image. Read on to find out how.

Quick notes

Note 1. If you’re comfortable with the idea of going into the files for your theme and altering stylesheets, you can set your own default options for WordPress to use. (Info here if that’s you.) But for most people that’s too hard to work out, and there’s a risk of messing things up. I’ve never been motivated to do it myself.

Note 2. Do try it the standard way without fiddling first, especially if you’re using a purchased theme. It may be that the folks who designed your theme have improved the standard spacing.

Note 3. If you want a text caption displayed with your image, eg for a photo, you might find this technique makes it go a bit weird and it’s easier to rely on default formatting.

Putting on the style

First, add your image via ‘Add Media’ and get it in basically the right place. Then we’ll tweak it so it ends up like the version here, which I hope you can see has more breathing space.

image spacing graphicIn the window where you write your post or page, there are two tabs at the top right: ‘Visual’ and ‘Text’. You’ve probably been working in Visual, which shows an approximation of what the page will look like. For this we need to go into Text.

Text mode shows you the guts of your page. Most of it is the text you’ve typed, but you’ll also see formatting instructions in <angle brackets>. Those are a blend of HTML, which tells the reader’s browser software what things go where, and CSS, which tells it the styles to use when it displays those things – size, colour, alignment and so on.  

What we’re going to do is add a style instruction to the image to tell it what spacing to use. This is only a little bit techy, and not risky as long as you only change the right bits. Save a draft of your page first (or update if it’s live and you’ve been making other changes), just as good practice.

Setting up a right-aligned image

Find the code for putting the image in the page. Look for the text the image goes next to. There’ll be a bunch of stuff starting ‘<img src=….’, with the image’s filename and size in pixels.

image spacing screenshot 1

At the end of that, but still inside the same angle brackets, we add the style instruction. You can just paste this in. Right now I’m assuming the image is aligned to the right of the page.

style=”margin: 6px 6px 15px 40px;”

So now it should look like this.

image spacing screenshot 2

Make sure you haven’t altered or overwritten anything that was already there. In particular, if you lose the final angle bracket the page may go funny because your browser won’t know where the formatting ends and ordinary text resumes. If that happens, you can just type it back in.

Note that WordPress may decide to move your style statement from the end of the image code to nearer the start. That’s fine: as long as it’s in there it’ll work.

What it means

Let’s break that instruction down. It tells the browser: look for formatting info between these quotes, each formatting instruction uses a colon to declare a property, and instructions are separated by semicolons. (Even a single instruction needs a semicolon to show when it ends.)

This instruction is about the margin of space round an object. You can specify each side separately, but this is the more concise way. There are four measurements in pixels, going clockwise: top of the image, then right, bottom and left. The left is the big one because that’s the side where the text is.

You can set whatever numbers you like for the spacing, and what works best will depend on the layout of your theme. The numbers I’ve given here should be a good start. You can set 0px for the top and outer edges, but I usually find a little offset helps for lining up with text, standing clear of borders, etc.

Fixing alignment

When WordPress puts the image in, it uses formatting instructions like ‘alignright’ that are pointers to sets of style instructions. I’ve found these can stop my own spacing instructions from taking effect. So I usually replace them.

That has two parts. First, I add an instruction to my own style to make sure the image goes to the right of the column, which is ‘float: right;’. So the style is now:

style=”float: right; margin: 6px 6px 15px 40px;”

Remember to separate the two instructions with the semicolon!

Second, I delete the ‘alignright’ (only!) from the beginning of the image code. So it ends up like this.

image spacing screenshot 3

Setting up a left-aligned image

This is the same, apart from a quick switcheroo.

The text is now to the right of the image, so you want your big margin on the right side. You also want to float the image to the left rather than the right, and delete ‘alignleft’.

style=”float: left; margin: 6px 40px 15px 6px;”

Spacing a large image or blockquote

If you’ve got a wide image or a quote that fills most of the page width, you’re only interested in the space above and below.

You can use just the same technique, but put ‘auto’ instead of a number of pixels for the left and right settings. That tells WordPress to sort those out itself, which usually means centring the element.

style=”margin: 20px auto 20px auto;”

You can also do it like this, leaving out the sides altogether:

style=”margin-top: 20px; margin-bottom: 20px;”

Wrapping up

I think good space around images is one of the most important factors in making a page look like a pleasant and professional reading experience. Have these tips helped you to make that tweak? Let me know in the comments.

 

If you liked this please share it!   Share on FacebookTweet about this on TwitterPin on PinterestShare on Google+
Google+

One Response to “How to get nice spacing round images in WordPress”

Read below or add a comment...

  1. Tim Gray says:

    Are those screenshots OK for folks to make out? I wonder whether I need to set them up so you can click on them and get a bigger version. I’ll overhaul them if there’s demand for it.

Leave a comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*