Unwanted background showing in html

Unwanted background showing in html

I am trying to intimate 4 images together. But unfortunately the images
are padding few pixels in the bottom.
You can see the problem here:

I just want to close all the images without any border or any padding.
CSS:
#play {
padding: 0px;
margin: 0px;
}
.ui-grid-b img {
width : 100%;
height : auto;
}
#play ul {
border: 0px solid black;
margin: 0 auto;
width: 50%;
height: 450px;
float: left;
padding: 0;
}
#play ul li {
background-image: none;
list-style-type: none;
}
#play ul li.list1 {
background-color: #ff0000;
}
#play ul li.list2 {
background-color: #00ff00;
}
HTML:
<div id="play" class="ui-grid-b">
<ul id="list1">
<li class="list1"><img src="images/img1.jpg" alt="Smiley face" ></li>
<li class="list1"><img src="images/img3.jpg" alt="Smiley face" ></li>
</ul>
<ul id="list2">
<li class="list2"><img src="images/img2.jpg" alt="Smiley face" ></li>
<li class="list2"><img src="images/img4.jpg" alt="Smiley face" ></li>
</ul>
</div>