Normally, when you add images to a page or post in a horizontal line, they butt up against each other. In the screen shot above, you will see in the first row what I’m talking about. In this video I will show you how to easily add space between images as you can see in the second row.
About the author
- More at
Thanks Bob. I love the way you make this clear, understandable and actionable. Much appreciated. Cheers! Kaarina
Kaarina Dillabough recently posted..Kudos to 71 Contributors
Glad you found it useful… sometimes it’s amazing the tiny workarounds in WordPress that aren’t that obvious, and well-hidden : )
Bob Dunn recently posted..How to Easily Adjust Spacing Between Images
Thanks a lot bob for your tutorial. Really useful for me.
GoWebBaby recently posted..The Power of WordPress
You can also style each image using the CSS Class generated for each wp-image i.d
Brad Dalton recently posted..Adding Horizontal Spacing Between Images
That’s true, but most of my readers are users who don’t who don’t mess around with or want to learn CSS
Bob Dunn recently posted..An Overview of the Post Fields in Gravity Forms
.wp-image-12345 { border: solid 5px red } Only one line Bob!
Brad Dalton recently posted..2 Ways To Remove Post Meta & Post Info Links
Again, you are missing the point and I just explained this in the other post
Bob Dunn recently posted..An Overview of the Post Fields in Gravity Forms
Thanks for the tutorial. Is there a way to apply spacing to a large quantity of pictures within the same post at one time (a mass updater). Going through every other picture takes a lot of time when you have a large number of photos. Thanks in advance!
Actually, if you are doing a large quantity of pictures you are probably better off using a gallery plugin for easier placement and spacing. You can do with the default gallery and a plugin like in this video: http://www.bobwp.com/using-the-default-wordpress-photo-gallery-and-the-gallery-carousel-without-jetpack-plugin/
Or use an more robust gallery plugin like NextGen Gallery: http://wordpress.org/extend/plugins/nextgen-gallery/
Bob Dunn recently posted..A Great Deal on the Studio Press Pro Plus All-Theme Package
Hi Bob,
I found this very helpful, thank you. However, for some reason all my photos are ending up in a single line, left justified on the page. I chose none as format. Any thoughts? Thanks, Lisa
Lisa Magoulas recently posted..Childhood Obesity
Hey Lisa, unfortunately this doesn’t work for centering… when you put several images using none, it just drops them in according the left margin. And if you try to center, or left or right justify, they will all go wonky. This really works best if you have several images that will file the area.
Bob Dunn recently posted..Infographic: How to Optimize Videos for SEO
Your video just confirmed my notion that the gallery feature is useless. Your way is much better if not more tedious. My problem is that after I upload an image and mess with it I cannot get the pointer in the right spot to upload the next adjoining image. Sometimes they turn out to be not aligned. With some success I use my direction keys to get back to the right spot. Also, what if I want to swap positions….trying just to push the images around has very unpredictable results. Any advice on either issue?
Hey Claudia, you made some good points. This isn’t the most effective way to create a gallery. It’s better for some simple, static images that you might want to place somewhere specifically on your site.
And yes, when you start using different alignments in WordPress, things can go incredibly wonky.
If you are wanting more of a gallery, and want to replace images and place easily, you might want to check out something like nextgen gallery plugin.
Bob Dunn recently posted..Have You Seen Me Speak at a WordCamp?
I have used Nextgen and it was great for organizing thumbnails but in this case I need line up photos of varying widths. My workaround could be to create a single photoshop image of the gang of photos.
Thanks for your advice on the spacing…I just made use of it today.
Yeah that makes sense. I’ve done it myself in Photoshop when I didn’t need individual hyperlinks. For example that was the easiest way for me to do my testimonials on my online blog class page.