删除画廊中相同宽度的图像之间的垂直空白

Question

我的画廊看起来像这样：https://drive.google.com/open?id=0BwBGhbPaJU_jdUl3cGdNQjVNVjg

正如您所见，这是我的画廊，我希望图片下方和图片之间的空格消失。 （箭头所示）

这是我的代码：

/*Gallery*/
#works-gallery{
	margin:0px;
	position:relative;
	top:900px;
	width:1440;
	text-align:center;
	line-height: 0;
	column-count: auto;
	column-gap:0px;
	-webkit-column-count:auto;
	-webkit-column-gap:0px;
	-moz-column-count:auto;
	-moz-column-gap:0px;
}

#works-gallery img {
	postion:relative;
	display:inline-block;
	width:480px;
	height:auto;
	top:0px;
	vertical-align:top;
	padding:0px;
	border:0px;
}

<div id="works-gallery">

    <img src="http://lorempixel.com/480/320/abstract" class="tile" /><img src="http://lorempixel.com/480/456/city" class="tile" /><img src="http://lorempixel.com/480/456/city" class="tile" />
    
    <td><img src="http://lorempixel.com/480/234/fashion" class="tile" /><img src="http://lorempixel.com/480/567/food" class="tile" /><img src="http://lorempixel.com/480/356/nature" class="tile" />
        
    <img src="http://lorempixel.com/480/678/nightlife" class="tile" /><img src="http://lorempixel.com/480/243/people" class="tile" /><img src="http://lorempixel.com/480/678/sports" class="tile" />
        
    <img src="http://lorempixel.com/480/256/technics" class="tile" /><img src="http://lorempixel.com/480/678/transport" class="tile" /><img src="http://lorempixel.com/480/235/abstract" class="tile" />
        
    <img src="http://lorempixel.com/480/678/animals" class="tile" /><img src="http://lorempixel.com/480/657/city" class="tile" /><img src="http://lorempixel.com/480/789/fashion" class="tile" />

</div>

请问我要改什么？

Answer 1

尝试移除垂直对齐属性