How to have space between text and images ?

  • Author
    Posts
  • #221287

    Hi !

    I have been able to upload images and insert them in my posts with text around them.
    However, there is no space between the text and my pictures, and it is not very nice… How can I leave some space between text and images (especially on the left side of the images when they are aligned right)?

    Thanks !!
    Annie

    #221798

    mistygroves
    Member

    I’ve been wondering this same thing.

    #221799

    ripley46
    Member

    Open your post and click on the image you want to adjust. Look at the icons in the Visual tab and select the green/blue one that is fifth from the right. This will allow you to edit/adjust image. In the box increase the horizontal space to around 10 or whatever you want until your image has enough space around it.

    #221800

    xtap59
    Member

    Simply add this snippet of code at the end of the picture or text.<p>

    That will add a space between.

    #221801

    ellaella
    Member

    I prefer float to align, and this example provides a margin:

    https://en.forums.wordpress.com/topic.php?id=8669&replies=3&page

    #221802

    vivianpaige
    Member

    ellaella – I don’t find that using float gives me the space around the image, at least not in Firefox. Am I missing something?

    #221803

    vivianpaige
    Member

    Ah – I think I see it. The margin element is still there.

    #221804

    ellaella
    Member

    Righty-oh! And it’s adjustable, of course. I think it gives the most professional-looking results with the types of images I use.

    #221805

    energetic
    Member

    Last time, I looked, that ‘float’ code is now automatically added into the code when you insert an image, but you do also need to add the horizontal space and vertical space using the tree icon, as ella says.

    This is an improvement which has been delivered by the new image uploader. Previously the horizontal and vertical space did not work in Firefox, although they did function in Internet Explorer.

    #221806

    vivianpaige
    Member

    I don’t see that the horizontal and vertical settings work in Firefox.

    #221811

    sondan
    Member

    AnnieA & MisteyG – I have been wanting to know this ever since I started here but have yet to find the solution that works for me.

    Ripley6 – I just tried your suggestion since that was a new response to me but it did not work. I tried it twice on the second pic on this page and as you can see the text is still flush against the pic. http://oldschoolmusiclover.wordpress.com/2008/04/18/when-something-is-wrong-with-my-baby-as-performed-by-sam-dave-1967/

    Xtap59 – exactly where would I put the paragraph tag to get the vertical space I need?

    Also could someone explain float vs align please using the “dummies” lingo?

    Thanks in advance to all.

    #221815

    jaymejenkins
    Member

    Ripley46 – I tried the border spacing and worked…until I went to save the post. I just went back to normal

    #221834

    elcadillo
    Member

    Hi all!

    Just put a STYLE code into image tag
    Example:

    1) Add Image (Alignment ; none, size: X)

    <img src=”http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif” alt=”” title=”adoleschenchos” width=”166″ height=”211″ class=”alignnone size-full wp-image-108″ />

    2) Clean the code-crap (alignment values, alt, etc):

    <img src=”http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif” width=”166″ height=”211″ />

    3) Put align & style code:

    IE:
    align=”left” style=”margin-top:2;margin-right:10;margin-bottom:4″

    Resulta:

    <img src=”http://guerry.wordpress.com/files/2008/05/adoleschenchos.gif” width=”166″ height=”211″ align=”left” style=”margin-top:2;margin-right:10;margin-bottom:4″ />

    ** Don’t erase final slash ( / )
    **Works for any browser
    ——————– See how look it:
    http://guerry.wordpress.com/2008/05/19/los-adoleschenchos/

    ————-
    You can adjust and add values

    Salud!

    #221835

    librefan
    Member

    @ elcadillo

    What you call “crap code” in WP.com is good XHTML/CSS practice while your code is mixing structure and layout:
    align=”left” style=”margin-top:2;margin-right:10;margin-bottom:4″

    — mind you, crap is probably good enough for IE ;-)

    #221836

    go to code view and modify the image tag; add styles just the way librefan sugest or you can simply use border attribute although this will create and unnessary left margin

    #221837

    img alt Tags are definitely NOT crap. they are very search engine friendly – meaning, there’s a higher chance of Google indexing your image and showing it in Google Image Search in time. And of course, that means there’s a high chance for you to get more hits from Google Image Search.

    as for spacing, if the code tab doesn’t freak you out, you can try this

    <img src="Put_Image_Url_Here" alt="Put_alt_words" hspace="10" vspace="10" border="10">

    change the digits 10 to something that suits you.

    #221838

    morris108
    Member

    I just manually type this inside the code

    hspace=”10″

    #221840

    librefan
    Member

    Just for your information: http://www.w3schools.com/tags/tag_IMG.asp says:

    The “align”, “border”, “hspace”, and “vspace” attributes of the image element were deprecated in HTML 4.01.

    The “align”, “border”, “hspace”, and “vspace” attributes of the image element are not supported in XHTML 1.0 Strict DTD.

    Qite a bore, isn’t? Those of us who don’t choose to pay something to have access to CSS files have to do without some features or they will produce out-dated code.

    (X)HTML shouldn’t be mixed up with any lay-out elements in good W3C pratice. CSS is not a new thing, BTW.

    I have chosen to stick to strict separation between HTLM and CSS, as far as WP.com code allows me. When my pages don’t validate, I correct my code and if it’s some error in WP, I let them know.

    #221841

    Of course, you can work with correct (X)HTML and CSS by putting an appropriate style attribute on each of the img elements; its just way more convenient to do it once in the stylesheet. :-)

    #221842

    moinansari
    Member

    works for me

The topic ‘How to have space between text and images ?’ is closed to new replies.