这个 html 的<img>标签怎么回事

我真是百思不得其解, 放进去 img 标签为什么有 padding 还是 margin 的值? 如果是图片的原因的话, 为什么第一个有 top 的值 而第二个 div 没有 top 的值

• 最开始的目的是给上面的那个 img 一个 padding-top 的值让它居中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			nav {
				height: 57px;
				width: 1200px;
				background: lightseagreen;
			}
			
			img {
				/*这个图片显示的大小是 31*31 格式是 png 是不是这个图片的问题*/
				background: lightgreen;
			}
			
			span {
				
				font-size: 21px;
				line-height: 57px;
				background: gray;
			}
			
			div {
				background: darkgray;
			}
		</style>
	</head>

	<body>
		<nav>
			<img src='http://i1.piimg.com/567571/99f5c8f94f3e02af.png' />
			<span id="second">新世界</span>
		</nav>

		<div>
			<img src="http://i1.piimg.com/567571/99f5c8f94f3e02af.png" />
		</div>
	</body>

</html>