Image with bigger bottom border?

HTML & CSS
1

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


<!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>
2

Not sure, but 1height:100px; is an invalid attribue.

3

I know I was using height:100px; to fix the problem.
It does, but I thought it looked like a hack and wanted to understand why there was more padding.

the 1height:100px; is just a quick way to comment out that line instead of
/height:100px;/

4

By default, browsers align the bottom of images (which are inline) with the baseline of any text that might sit beside them, leaving space below for the descenders. To stop this behavior, add this to your CSS:

img {vertical-align:bottom;}