Vertical spacing between images

  • Unknown's avatar
    floridasandy1 · Member ·

    On one of my pages
    http://adrccares.org/events/22nd-annual-caregiver-educational-conference/

    I’m trying to put a nice amount of vertical white space between some sponsor logos that I have in a vertical column. I’ve tried about everything and finally have some white punctuation marks to create lines that look blank! I know there is a better way to do this, but I feel like I’ve tried the usual suspects.

    I need to turn this over to a newbie for future event sponsor logos, and I can’t see her going into the html view and adding a paragraph with three lines of white periods! How *should* I be doing this?

    Thanks in advance!
    –Sandy

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    See here please > http://en.support.wordpress.com/visual-editor/#alignment

    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left hand side, or to display an image that’s centered without text on either side of it.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.

    Align-right means position right, with the rest of the content wrapping around the left side of the image.

    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

  • Unknown's avatar
    floridasandy1 · Member ·

    Thank you so much for your answer! But I fear I must have not made myself clear. I have already used the div code that you mentioned, and am not having a problem with staggered images.

    My problem is in trying to create white space between the bottom of one image and the top of the next image. Is there some legitimate way to do this, other than the hack I have used (putting white colored periods to create blank space between images in my column of images)?

    I feel sure there is something more elegant that I will feel better about showing to my coworker who will be doing this in the future! Is my question clear now? Thanks!

  • Unknown's avatar
    brookedot · Member ·

    Hi Sandy,

    I must say you’ve come up with a very creative solution! The way I would recommend adding spaces above and below your images is to add a margin from the “Advanced Options” area of the image editor.

    To get their follow these steps:
    1) Click on the image in Visual Mode
    2) Click the Pencil icon to bring up the editor
    3) Click “Advanced Options” to toggle the settings
    4) Enter the amount of margin (in pixels) you want above and below your images

    This will add the CSS code needed to add the margin.

    Here is a screenshot of what the advanced settings may look like with a margin added:
    https://cloudup.com/i6NZ5USR31E

    This support page on Image Settings also provides additional details:
    https://en.support.wordpress.com/images/image-settings/

  • Unknown's avatar
    floridasandy1 · Member ·

    Beautiful! I knew there must be an easier way — wow, it was right in front of my face. Thank you so much! Resolved. :)

  • The topic ‘Vertical spacing between images’ is closed to new replies.