CSS: Unable to set padding-bottom = 0 in a Photo-DIV

Question

 <div id="container">
 <img src="photo.png" alt="foobar" class="myphoto />
 </div>

 #container {
   padding 0;
   border: 1px solid #c8c8c8;
   width: 100%;
   }

 #container .myphoto {
  width: 100%;
  height: auto;
  }

When I do this, there's always a blank field between the photo and the bottom-border of the container-DIV (~ 3px). It looks like:

 #container {
  padding: 0 0 3px 0;
  }

Is there a trick?

Answer 1

Add display: block; to the img.

CSS:

 #container .myphoto {
     width: 100%;
     height: auto;
     display: block;
 }

DEMO HERE