space between images when using lightbox

[yediburun]

1) Script Title: Lightbox Image Viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I want to increase the space between my images. They show up in a grid view coming after each other; and they seem to have 2 or 3px between each other. How can I make it larger?

Thanks in advance!

[bluewalrus]

I dont know your code but add this to the image container or to the image if there isnt a container around each image

margin:5px;
or
margin:10px;
or
margin:20px;
or 
margin: more px;

you could also try padding or   the nbsp is a blank text space and not a good way to do it.

[yediburun]

Thanks for the quick response!
The code is like this:

	
	<link rel="stylesheet" href="../custom/lightbox/css/lightbox.css" type="text/css" media="screen" />
	
	<script src="../custom/lightbox/js/prototype.js" type="text/javascript"></script>
	<script src="../custom/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
	<script src="../custom/lightbox/js/lightbox.js" type="text/javascript"></script>

	<style type="text/css">
		body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif;	}
	</style>


<a href="../images/posters/01.jpg" rel="lightbox" title="inspired by 'The Poetics of Space' by Gaston Bachelard"><img src="../images/posters/01_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/02.jpg" rel="lightbox" title="'rhythm', inspired by 'Rhythmanalysis: Space, Time and Everyday Life' by Henri Lefebvre"><img src="../images/posters/02_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/03.jpg" rel="lightbox" title="odakule building, beyoglu, istanbul"><img src="../images/posters/03_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/04.jpg" rel="lightbox" title="constructionXdestruction; there is still hope for Baghdad"><img src="../images/posters/04_.jpg" width="250" height="250" alt="" /></a>

<a href="../images/posters/05.jpg" rel="lightbox" title="play here: to create your own"><img src="../images/posters/05_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/06.jpg" rel="lightbox" title="the lost marble"><img src="../images/posters/06_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/07.jpg" rel="lightbox" title="poster work for a project about 'playing spaces'"><img src="../images/posters/07_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/08.jpg" rel="lightbox" title="about UNStudio and their understanding of architecture"><img src="../images/posters/08_.jpg" width="177" height="250" alt="" /></a>

<a href="../images/posters/09.jpg" rel="lightbox" title="the loss of architectural identity and degeneration"><img src="../images/posters/09_.jpg" width="353" height="250" alt="" /></a>

<a href="../images/posters/10.jpg" rel="lightbox" title="inspired by Mauro Baracco's article 'Completed yet Unconcluded' in 'AD: Poetics in Architecture'"><img src="../images/posters/10_.jpg" width="577" height="250" alt="" /></a>

<a href="../images/posters/11.jpg" rel="lightbox" title="inspired by Daniel Garcia Andujar's project 'Postcapital'"><img src="../images/posters/11_.jpg" width="500" height="250" alt="" /></a>

<a href="../images/posters/12.jpg" rel="lightbox" title="daily rhythm of a person[first image] the rhythm of taksim square, depending on the activities done by people[second image]"><img src="../images/posters/12_.jpg" width="856" height="250" alt="" /></a>

when I try to add margin:5px between each image input, it doesn't seem to work. Well it works, but adds like 80px. I don't understand why.
Plus, how can I increase the horizontal spaces in the grid?
your suggestion seems to add only vertical spaces after each image.

thank you!