Gap on image bottom ?
I know it’s another simple one but I can’t work it out
I have a list of images here and they all seem to have a gap at the
bottom. What’s causing the gap?
<!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;
}
body{
background:#eee;
}
li{
background:white;
list-style:none;
border: 1px solid red;
margin:0 0 10px 0;
padding:0;
}
#wrap{
margin:30px;
width:300px;
}
img{
border:0;
padding:0;
margin:0;
}
a{
border:0;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li><a href=""><img src="01.jpg" alt="" /></a></li>
<li><a href=""><img src="02.jpg" alt="" /></a></li>
<li><a href=""><img src="03.jpg" alt="" /></a></li>
<li><a href=""><img src="04.jpg" alt="" /></a></li>
</ul>
</div><!-- #wrap -->
</body>
</html>