WordPress.org

Ready to get started?Download WordPress

Forums

How to make space between image and text? Normal html methods don't work (5 posts)

  1. dibs
    Member
    Posted 8 years ago #

    Very simple question:
    I made a post on my blog that includes an image in it. (Visible here: http://www.dibsblog.com). As you can see, the text wraps around the image, but there's no space between the text and the image -- they practically touch. I've encountered this situation on non-blog html pages before, and there were two ways that worked to fix the problem. However, strangely, neither one of them has any effect on the spacing between the image and the text on my WordPress blog.

    Specifically, I tried inserting a "horizontal space" code into the picture placeholder, like so:

    {img src="image.jpg" HSPACE=10 ALIGN=LEFT}

    But when uploaded, this had no effect on the spacing -- very strange.

    Next I tried making there be a "border" around the image, but making the "border" be white, like so:

    {img src="image.jpg" BORDER=10 BORDERCOLOR=white ALIGN=LEFT}

    Yet this resulted in a 10-pixel border that was black, not white -- the opposite of what I wanted.

    The final technique, which would work, would be to create a band of "white space" around the actual picture within the image itself -- but that is way too complicated a process if I want to do this simply and repeatedly.

    So: why don't these standard html techniques for making space between text and an image work? And if there's no way to make them work, how can I easily make a space between text and an image in a WordPress posting?

    I know the answer must be simple, but I haven't been able to figure it out. Thanks.

  2. alrescha
    Member
    Posted 8 years ago #

    Your theme already includes three ways to layout your images: alignleft, alignright, centered, each with appropriate margin settings. These are CSS classes for your img tag, so this is how you use them in your posts:

    <img src="image.jpg" class="alignleft">

    Here text will flow on the right of the image.

  3. dibs
    Member
    Posted 8 years ago #

    alrescha:

    Thank you! That worked like a charm. All I had to do was change "ALIGN=LEFT" to "class="alignleft" and I got the appropriate spacing.

    I knew it was easy.

    Problem solved.

  4. lkomisar
    Member
    Posted 7 years ago #

    Didnt work for me. Any other ideas?

  5. vkaryl
    Member
    Posted 7 years ago #

    lkomisar: does your style.css file include the appropriate classes already?

Topic Closed

This topic has been closed to new replies.

About this Topic