margen invisible??

[oniakai]

que cachondo es CSS ahora que se coloca bien el margen raro ese me sale otra cosa... acabo antes si os pongo el HTML y a ver si alguien me sabe decir que estoy haciendo mal...

Código HTML:

<div class="image-gallery">
<ul>
	<li>
		<ul class="row first">
			<li class="caption first">
				<a title="Caption 1-1" href="#">
				<img class="gallery" alt="Caption 1-1" src="elements/images/lastprints/lastprint_1-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 1-2" href="#">
				<img class="gallery" alt="Caption 1-2" src="elements/images/lastprints/lastprint_1-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 1-3" href="#">
				<img class="gallery" alt="Caption 1-3" src="elements/images/lastprints/lastprint_1-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 2-1" href="#">
				<img class="gallery" alt="Caption 2-1" src="elements/images/lastprints/lastprint_2-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 2-2" href="#">
				<img class="gallery" alt="Caption 2-2" src="elements/images/lastprints/lastprint_2-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 2-3" href="#">
				<img class="gallery" alt="Caption 2-3" src="elements/images/lastprints/lastprint_2-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 3-1" href="#">
				<img class="gallery" alt="Caption 3-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 3-2" href="#">
				<img class="gallery" alt="Caption 3-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 3-3" href="#">
				<img class="gallery" alt="Caption 3-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 4-1" href="#">
				<img class="gallery" alt="Caption 4-1" src="elements/images/lastprints/lastprint_3-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 4-2" href="#">
				<img class="gallery" alt="Caption 4-2" src="elements/images/lastprints/lastprint_3-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 4-3" href="#">
				<img class="gallery" alt="Caption 4-3" src="elements/images/lastprints/lastprint_3-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row">
			<li class="caption first">
				<a title="Caption 5-1" href="#">
				<img class="gallery" alt="Caption 5-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 5-2" href="#">
				<img class="gallery" alt="Caption 5-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 5-3" href="#">
				<img class="gallery" alt="Caption 5-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
	<li>
		<ul class="row last">
			<li class="caption first">
				<a title="Caption 6-1" href="#">
				<img class="gallery" alt="Caption 6-1" src="elements/images/lastprints/lastprint_4-1.png">
				</a>
			</li>
			<li class="caption">
				<a title="Caption 6-2" href="#">
				<img class="gallery" alt="Caption 6-2" src="elements/images/lastprints/lastprint_4-2.png">
				</a>
			</li>
			<li class="caption last">
				<a title="Caption 6-3" href="#">
				<img class="gallery" alt="Caption 6-3" src="elements/images/lastprints/lastprint_4-3.png">
				</a>
			</li>
		</ul>
	</li>
</ul>
</div> 

El efecto deseado es el de una matriz de imagenes 3x6 con 10px de separacion entre imagen y 10px de margen entre filas...

Gracias!!

Este es todo el css que tiene asociado cada clase/id

Código:

div#second div.image-gallery {
	margin-bottom: 30px;
}

div#second img.gallery {
	border-top: 1px solid #d8d8d8;
	width: 67px;
	height: 41px;
}

div#second ul.row li.caption,
div#links ul.links li {
	display: inline;
	float: left;
}

div#second ul.row {
	margin: 5px 0;
}

div#second ul.row li {
	margin: 0 6px;
}

div#second ul.row li.first {
	margin: 0 6px 0 0;
}

div#second ul.row li.last {
	margin: 0 0 0 6px;
}

div#second ul.first {
	margin: 0 0 5px 0;
}

div#second ul.last {
	margin: 5px 0 0 0;
}

o si alguien me aconseja una manera mejor de conseguir una matriz de imagenes.. como os dije soy novatillo... :P