Как создать большой блок меньших изображений?

Question

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

.links { 
 
\t margin: auto; 
 
\t padding: auto; 
 
\t width: 100%; 
 
} 
 
img { 
 
\t margin: 0 0 0 0; 
 
\t padding: auto; 
 
\t vertical-align: middle; 
 
\t width: 100px; 
 
\t 
 
\t } \t 
 

 
h2 { 
 
\t margin: 15% 0 0 0; 
 
\t padding: 0 0 0 0; 
 
\t margin-top: 10px; 
 
\t margin-bottom: 5px; \t 
 
\t font-size: 125%; 
 
\t text-align: center; 
 
}

<h2>Landscapes</h2> 
 
<div id="links"> 
 
    <a href="img/landscapes/brs.jpg" title=""> 
 
     <img src="img/thumbnails/brs.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/ela.jpg" title=""> 
 
     <img src="img/thumbnails/ela.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/farm.jpg" title=""> 
 
     <img src="img/thumbnails/farm.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/first.jpg" title=""> 
 
     <img src="img/thumbnails/first.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/hf.jpg" title=""> 
 
     <img src="img/thumbnails/hf.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/lindy.jpg" title=""> 
 
     <img src="img/thumbnails/lindy.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/lp.jpg" title=""> 
 
     <img src="img/thumbnails/lp.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/mcafee.jpg" title=""> 
 
     <img src="img/thumbnails/mcafee.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/meth.jpg" title=""> 
 
     <img src="img/thumbnails/meth.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/nr.jpg" title=""> 
 
     <img src="img/thumbnails/nr.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/d.jpg" title=""> 
 
     <img src="img/thumbnails/d.jpg" alt=""> 
 
    </a> 
 
    <a href="img/landscapes/old.jpg" title=""> 
 
     <img src="img/thumbnails/old.jpg" alt=""> 
 
    </a> 
 
</div>

Вот образ того, что она в настоящее время выглядит следующим образом:

вид вещи, я иду:

Answer 1

Попробуйте

a, img, div{ 
    display: inline-table; 
} 

.links { 
    margin: auto; 
    padding: auto; 
    width: 100%; 
} 

img { 
    margin: 0 0 0 0; 
    padding: auto; 
    vertical-align: middle; 
    width: 100px; 
} 

h2 { 
    margin: 15% 0 0 0; 
    padding: 0 0 0 0; 
    margin-top: 10px; 
    margin-bottom: 5px; 
    font-size: 125%; 
    text-align: center; 
} 
a{ 
    display: inline-table; 
    width: 100px; 
} 

Fiddle: https://jsfiddle.net/55cdek2r/

Answer 2

Просто добавьте следующие строки и измените .links на #links или установить класс = 'ссылки' вместо ид = 'ссылки'

a{ 
    display: inline-block; 
    margin: 0px -2.5px; 
}