Gap on bottom Image border?

HTML & CSS
1

Hi all

I have a simple list of images floated into a grid. The images are surrounded with <a> tags

http://www.ttmt.org.uk/forum/imgBorder/

If I put a border on the images there is a gap at the bottom of the images between the image and the border.

I’m I doing something wrong? What’s happening here?

If I set the correct height on the images the gap disappears - is this the way to go?


<!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{
	   list-style:none;
	 }
	 #thumbnails{
	   width:450px;
	   margin:50px;
	 }
   #thumbnails li a{
     border: 1px solid red;
     1height:100px;
     float:left;
     margin:5px;
     width:133px;
   }
	</style>
</head>

<body>
  <ul id="thumbnails">
    <li><a href="#"><img src="01.jpg" /></a></li>
    <li><a href="#"><img src="02.jpg" /></a></li>
    <li><a href="#"><img src="03.jpg" /></a></li>
    <li><a href="#"><img src="04.jpg" /></a></li>
    <li><a href="#"><img src="05.jpg" /></a></li>
    <li><a href="#"><img src="06.jpg" /></a></li>
  </ul>
  

</body>
</html>
2

You didn’t put a border on the images. You put it on the <a>.

3

of course - thank you

It’s been a long day