Simpliest way to display thumbnail images without spaces - css

Question

I am trying display images seamlessly in a checkerboard fashion. All images are same size. Can't seem to eliminate spacing between rows.
The overall goal is compact code.
Here is the original code.
<?php build();
function build(){
for($x=1;$x<=11;$x++){
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><?php }}}?>
Here is what I have after trying several other things to eliminate the spacing.
<?php build();
function build(){
for($x=1;$x<=11;$x++){
?><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><form action="$_SERVER['PHP_SELF']"
><input type="image" name="data" value="var" src="images/blue.png"></form
><?php }?></div><?php }}?>
Per request, html translation.. (values changed to 3 to reduce length.)
<form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form><form action="$_SERVER['PHP_SELF']" style="float:left;"
><input type="image" name="data" value="var" src="images/blue.png"
></form>
Here is what ended up working. It works now because all inputs have been lumped into a single form.
<?php solutionbuild();
function solutionbuild(){
for($x=1;$x<=11;$x++){
?><form method="POST" action="<?php $_SERVER['PHP_SELF'] ?>"><div style="clear:left; float:left;"><?php
for($y=1;$y<=11;$y++){
?><input type="image" name="data" value="9" src="images/green.png"><?php
}?></div><?php }}?>
html version (yikes)
<form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div><form method="POST" action=""><div style="clear:left; float:left;"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"><input type="image" name="data" value="9" src="images/green.png"></div>
I don't know exactly why consolidation of the forms eliminates the spacing issue. If anyone knows, please let me know. Thanks

Answer 1

The space you are seeing below your images is because they are inline elements. Inline elements include space for the descender in text like the lowercase letters j and g.
Float your image inputs to or set them to display block to remove this extra space.
Edit
Not sure why you want to use a form for each image input. I would wrap a form tag around the whole thing myself (that is, without further info) so I left them out.
Here's an example:
.no-float,
.float {
margin: 25px 0;
}
.float input {
float: left;
}
.float .row {
clear: left;
}
<!-- Non floated inputs (has spaces) -->
<div class="no-float">
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
</div>
<!-- floated inputs (no spaces) -->
<div class="float">
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
<div class="row">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
<input type="image" src="http://lorempixel.com/30/30/abstract/">
</div>
</div>