How to have space between text and images ?
-
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 -
-
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.
-
Simply add this snippet of code at the end of the picture or text.<p>
That will add a space between.
-
I prefer float to align, and this example provides a margin:
https://en.forums.wordpress.com/topic.php?id=8669&replies=3&page
-
ellaella – I don’t find that using float gives me the space around the image, at least not in Firefox. Am I missing something?
-
-
Righty-oh! And it’s adjustable, of course. I think it gives the most professional-looking results with the types of images I use.
-
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.
-
-
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.
-
Ripley46 – I tried the border spacing and worked…until I went to save the post. I just went back to normal
-
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 valuesSalud!
-
@ 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 ;-)
-
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
-
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.
-
-
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.
-
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. :-)
-
- The topic ‘How to have space between text and images ?’ is closed to new replies.
WordPress.com Forums 