Самый простой способ отображения миниатюр изображений без пробелов

Question

Я пытаюсь отображать изображения плавно в шахматном порядке. Все изображения одинакового размера. Не могу устранить промежуток между рядами.

Общая цель - компактный код.

Вот оригинальный код.

<?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 }}}?>

Вот то, что я имею после попытки нескольких других вещей, чтобы устранить расстояние.

<?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 }}?>

По запросу, перевод html.. (значения изменены на 3, чтобы уменьшить длину.)

<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>

Вот что получилось. Это работает сейчас, потому что все входные данные были объединены в одну форму.

<?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 версия (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>

Я не знаю точно, почему объединение форм устраняет проблему пробелов. Если кто-нибудь знает, пожалуйста, дайте мне знать. Спасибо

Answer 1

Пространство, которое вы видите ниже ваших изображений, потому что они являются встроенными элементами. Встроенные элементы включают в себя место для спуска по тексту, как строчные буквы j и g.

Переместите ваши входы изображений или установите их для отображения блока, чтобы удалить это дополнительное пространство.

редактировать

Не уверен, почему вы хотите использовать форму для каждого ввода изображения. Я бы обернул тег формы вокруг себя (то есть без дополнительной информации), поэтому я их пропустил.

Вот пример:

.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>