How to add a space between two HTML image tag ?
A Reader Would Like To Know:
I’m building my blog on WordPress and my left sidebar consist of ten 100×100 squares (drawings).
I pasted the HTML tags one after another (i.e <a href=”http://photobucket.com” target=”_blank”><img src=”http://image.jpg” border=”0″ alt=”Photo Sharing and Video Hosting at Photobucket”></a>) but that left no space between the squares.
Is there an HTML command to add a small space between each drawing (square) ?
Thanks !
Thank you so much guys ! Worked perfectly !
I know it was a silly little thing… 
I’ll remember for next time.
I’ll be back in a day to give you your points !
See Answers Below…
WebHostingHub - Best WordPress Hosting Lightning fast WordPress optimized servers running cPanel control panel. Host unlimited blogs on one account. Fast & easy 1-click WordPress installation. Outstanding WordPress customer support. Yes, we do WordPress! A+ Better Business Bureau rating. 90-day money back guarantee. Click here to get your WebHostingHub account now.
4 Responses to How to add a space between two HTML image tag ?
Leave a Reply
If you’re going to be doing this for every image on the page, an easier method is to simply put the code:
<style type="text/css">
img {
margin-left:5px;
margin-right:5px;
}
</style>
into the head element of your web page. However, if there are other images on the page that you do not want to touch, and all of the images you want to space out happen to be within a certain element on the page, say a DIV element that is your sidebar, all you have to do is give the container an id attribute, say <div id="sidebar" restofthedivtagfollows… > if it does not already have one. Then simply change the selector above so that it reads:
<style type="text/css">
#sidebar img {
margin-left:5px;
margin-right:5px;
}
</style>.
the above syntax means that whenever the browser finds an img element that is inside the element with the id of "sidebar", it will apply the style detailed within the curly braces. Adjust the pixels as you feel necessary (right now, there should be 5+5 = 10 pixels of space between each img element) and now you don’t need to constantly add non-breaking spaces (nbsp’s) manually. Simply put your img elements one after the other and the CSS interpreter of the browser will adjust the space between them according to the style element.
Besides, non-breaking spaces really destroy a page in several ways. The first is that they purposefully *do not break*, which means they will increase the horizontal width of your page without respecting any width sizing you may have in mind. Also, since they are actually space symbols, part of the font set of whatever font the client browser will be seeing, the spacing on your images will look completely different on each person’s screen and even on different browsers on the same computer! The third and most obvious problem is your having to manually edit all of these spaces every time you change this page, not to mention the mess of seeing a bunch of ampersands and arcane symbols cluttering up the code of the page.
Please see the link in the source for more CSS commands. It is a much more flexible method of styling web pages than hacking HTML, which is not really designed for presentation.
Between the img tags you can add a space (press the space-bar) or you can use the HTML space code to add more spaces: Ampersand + nbsp;
The ampersand character is the curly and symbol you get when you press Shift and 7 together. For some reason yahoo answers won’t let you write it with nbsp; So just get rid of the space in this code: & nbsp;
If you add lots of & nbsp; between the pictures there will be a bigger gap.
& nbsp;
that is no break space, (like having a spacebar space in HTML)
PS take out the space between the & and the n because Yahoo is not letting the code line show without the space there!
The simplest way to add a little space in between is to add some vspace to every other image tag. Or add a smaller amount of vspace to EVERY image. Vspace adds padding just to the top and bottom of an image, just like hspace adds on the left and right of an image. Adjust the number of pixels (I used 5) till you get the look you want. Simple! (a full line break may add more space than you want)
<img vspace="5" src="image.jpg">
Joyce
http://www.DesignByJoyce.com/