Help With Spacing Between Images on Blog!

  • Author
    Posts
  • #1764060

    dawson74
    Member

    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 annophotographyblog.com.

    The blog I need help with is annophotographyblog.com.

    #1764186

    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;
    }
    #1764187

    dawson74
    Member

    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! : )

    #1764188

    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.

    #1764189

    Just let me know the name of the post.

    #1764190

    dawson74
    Member

    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!

    #1764193

    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)

    #1764194

    dawson74
    Member

    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 that…is there a good resource for learning that code or can you give me some tips on that?

    Thank you SO much for your time! : )

    Anne

    #1764197

    dawson74
    Member

    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!! : )

    #1764200

    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;
    }
    #1764202

    dawson74
    Member

    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! : )

    #1764211

    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;
    }
    #1764247

    dawson74
    Member

    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…

    #1764249

    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.

    #1764250

    dawson74
    Member

    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…

    #1764254

    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.

    #1764320

    dawson74
    Member

    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!

    thanks!! http://annophotography.wordpress.com/?p=2233&preview=true

    #1764321

    kardotim
    Member

    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!

    #1764322

    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.

The topic ‘Help With Spacing Between Images on Blog!’ is closed to new replies.