如下的一个HTML文档：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a {
background-color:#666666;
padding:10px;
}
body {
margin:0;
padding:0;
background-color:#00FF66
}
</style>
</head>
<body>
<a></a>
<div style="width:100px; height:10px; background-color:#000000; margin:0; padding: 0"></div>
</body>
</html>
a标签中没有任何内容，我只是设置了padding，但是效果如图所示：
图中灰色的是a标签背景色，他的区域实际是20*30（它的实际高度是30px），且覆盖在div上。理论上它的区域应该是20*20的小方块，高度多出的10px无法理解
下方的div标签显示的位置和区域感觉是正常的。
本人小白，求解
