默认的vertical-align值是baseline，它可以是文本的底线或图像的底线（img元素是replaced element，inline* level），这会导致演示第一行的偏移。
为了解决这个问题，你可以将vertical-align设置为top，或者像你说的将img设置为display: block也可以。

img标签的行为就像一个inline和bock元素，基于这个答案：Is element block level or inline level?
这就是为什么你必须在一个带有inline-block的div中的img上显示block。

您可以通过添加float: left或vertical-align:top来解决此问题
https://jsfiddle.net/foxhh0av/

div > div {
	background: red;
	height: 200px;
	width: 19%;
	text-align: center;
	margin: 0 5% 5% 0;
	display: inline-block;
  float: left;
}

img {
	height: 128px;
	width: 128px;
	display: /* "BLOCK" FIXES THE ISSUE */; 
}

<div id="wrapper">
		<div id="a1">
			<img src='http://dfsm9194vna0o.cloudfront.net/1471693-0-Washingmachineforlaundry128.png' alt=""/>
		</div>
		<div id="a2">
		</div>
		<div id="a3">
		</div>
		<div id="a4">
		</div>

		<div id="a5">
		</div>
		<div id="a6">
		</div>
		<div id="a7">
		</div>
		<div id="a8">
		</div>
	
</div>

在你的css中修改一下：

img {
  height: 128px;
  width: 128px;
  display: block; 
}

应该能修好

您可以将vertical-align: top;设置为子div（div > div）。