html - 如何创建一大块较小的图像？

Question

我想格式化我的缩略图，使它们形成一个更大的正方形。目前它们不居中(这是我的第一个问题)，并且它们之间有空格。我将如何使整个缩略图居中，然后使所有缩略图相互接触并形成一个正方形？

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

<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

只需添加以下内容并将 .links 更改为 #links 或设置 class = 'links' 而不是 id = 'links'

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