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

Question

我想格式化我的tumbnails，以便它们形成一个更大的方块。目前他们已经不受限制（这是我的第一个问题），并且他们之间有空格。我将如何围绕整体缩略图进行居中，然后制作所有缩略图以触摸并形成正方形？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是目前的形象：

我想要的那种东西：

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

小提琴：https://jsfiddle.net/55cdek2r/

Answer 2

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

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