Need help? Check out our Support site, then

Help With Spacing Between Images on Blog!

  1. Until recently I could post my images in my blog posts and have only a thin white line between each image. Now, when I try to center an image, it automatically creates a thicker white line between the images. Any idea why this is happening? How do I control the size of the white between images? I am assuming this is a "border" issue? Not sure. Can't find anything that helps, especially with the part of it changing when I go to center my vertical images.

    The blog I need help with is

    The blog I need help with is

  2. Looking at your Maternity Phototgrapher post, I cannot see what is causing the increased distance between images vertically, but change the img rule you have in your custom CSS to the following and see what you think. And also delete the second img rule as I have combined the two of them to keep things cleaner.

    img {
        margin: -4px auto 0;
        border-width: 0 !important;
  3. I haven't published a post with the spacing issue yet - my published posts do not have the issue, though I might like the margin between the images (from top to bottom) even smaller. I will try what you suggested! Thanks so much for the response! I'll try anything right now! : )

  4. If you have a draft post with the issue, I can go into your dashboard and preview that post and see what is going on with it for you. You don't have to have it published.

  5. Just let me know the name of the post.

  6. Oh, that's incredible! Yes, the draft post to look at would be "they grow", and it started happening with "Meeting Ana," so a few are like that in there. I did just paste in the new rule that you gave me for CSS...haven't looked at it yet...THANK YOU!

  7. On the existing posts, you have been inserting the images with an alignment of "none" which means they have not left/right/bottom/top margins set. In the "they grow" post, you are inserting them with left alignment, which has a top, right and bottom margin settings. In "they grow" go in and edit the post and change the alignment of the images to none. Just FYI on alignments:

    none: inserts with left alignment but with no margins or padding and no text wrap

    left and right: inserts with text wrap and margins for clearance to surrounding text

    center: inserts with center alignment and no margin or padding (no text wrap)

  8. I forgot about that piece...but why when I go to center it do I get the same result? In the past I have had problems when I got to center the images because it does the same thing - automatically adds that additional space beneath the image...

    Also, now what do I do with the new img rule that I entered? I do want to decrease the size of the space from one image to the next and want to learn how to do / control there a good resource for learning that code or can you give me some tips on that?

    Thank you SO much for your time! : )


  9. Say, for example, I prepare vertical diptychs (side by side vertical images) with no margin between them, a look I like for presenting my photography, and therefore want that look to be consistent throughout and have no margin (white)beneath those images...I would think that would be a zero margin, but it was already set at that, or seemed to be, in the original CSS for Spun theme. I basically want a very thin white line or no white line and want to choose depending on the blog post.

    THANKS AGAIN!! : )

  10. Sometimes images get inserted into separate paragraphs and then paragraph bottom margin comes into play. On the Maternity Phototgrapher post, it looks like perhaps the images were inserted and then either a shift-return was done (line break but no paragraph break) or you inserted one image, then immediately inserted another, without moving the cursor, and then inserted the next, etc. If you hit return to move to another line, it inserts another paragraph.

    There have been some changes to the editor and to the image insert side of things to make it faster and easier to use (you can drag and drop images directly from your desktop into the editor now, for example). There are still adjustments being made though.

    Now that I know fully what is going on, let's change the rules a little so that it only affects alignments of none and center. So,

    img {
    	border-width: 0 !important;
    img.alignnone, img.aligncenter {
            margin-bottom: -4px;
  11. ok, still can't center single vertical images without that extra margin space being created...I have added a bunch of images to the "they grow" post and need the single vertical images centered...thanks! : )

  12. Ah, I see the issue. Add the following and then you can center align without the gap at the top of the images.

    img.aligncenter {
        margin-top: 0;
  13. I had some luck today working with it, but now I am having the same trouble again..."A Midwife's Granddaughter" and "Meeting Ana" are ok, but "Home With Ana" is not working right - can't center the images without the spacing issue again...

  14. Hi, When viewing At Home with Anna in Preview mode, I'm not seeing any large gaps between images. I do notice that in the Visual post editor, images are not showing as being centered even though they are when you look at it in preview.

  15. I played with it this morning and just started a new post and did it over and for whatever reason it worked. I have had to do that a bunch before...

  16. If it happens again, keep that post and post here in the forums so that we can take a look at it and see what is causing the issue.

  17. Hi, it's happening again! Specifically, the blog post I am working on is "Love From Faith" - just a draft right now... was hoping to publish tonight but I can't center the vertical images again without getting that big space between the images!


  18. Sorry for the delay. The link doesn't work anymore, could you please send me the link of the page where you encounter the issue.

    Thank you!

  19. Since this thread is quite old, I'm going to mark it as resolved. If you still need help on this issue, or if you need additional help, please feel free to start a new thread. Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic