When you add images to a post or page using ‘Add Media’, WordPress jams them pretty tight up to the text.
You 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.
In 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. [Read more…] about How to get nice spacing round images in WordPress