Floated img - bigger bottom border ?

untitled

I have a list of images in <li> tags that contain <a> tags with images in

The <a> tags have padding and a border.

The looks bigger in the bottom and I can't see why

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<style type="text/css" media="screen">
	*{
	  margin:0;
	  padding:0;
	}
	ul{
	  margin:50px;
	  list-style:none;
	}
  li{
    display:inline;
  }
  li a{
    overflow:auto;
    border: 1px solid #999;
    display:block;
    float:left;
    padding:5px;
    1height:100px;
    margin:8px;
  }
	</style>
</head>

<body>
  <ul>
    <li><a href="#"><img src="01_th.jpg"></a></li>
    <li><a href="#"><img src="02_th.jpg"></a></li>
    <li><a href="#"><img src="03_th.jpg"></a></li>
    <li><a href="#"><img src="04_th.jpg"></a></li>
  </ul>

</body>
</html>