Unwanted whitespace

Like Chris Warr suggested, setting your image to display: block is the solution you're looking for. However, you can also set font-size: 0; in your container, which will also eliminate the whitespacing (not a suggested solution though). Font-size?! Yeah, I'll explain. Keep reading.

The reason you got the whitespace is because it was being treated as an inline element. Inline elements are generally treated as elements without set dimensions and thus they will not push other content into new rows on the page (hence the name "inline"). Inline elements are generally given to things you would arrange within a paragraph, such as strong, anchor, i, etc.

So to answer your latter question, the reason you got the white-space under your image is the same reason text have whitespace between lines. Your image was essentially being treated as text (or any other inline element) and so your browser was applying the default whitespacing for inline-elements to your image.

So now you know why setting a font-size to zero is another possible solution to this issue. Basically, font with zero dimensions also have zero whitespacing.

Oh, and you should know that the img element is actually inline by default, so it may be a good habit to always check and see if the display: block property applies in your situation. From my experience, it usually does.

Hope this helps!

Good luck.

EDIT: Just realized that line-height: 0; is another possible solution, which is even better than setting font-size to zero. (though I'd still suggest display: block).

Try setting the image width to 100% as opposed to max-width:100%.

In general I find inline elements to be unreliable with padding,margins, width, height etc Found this old article about inconsitency:

http://www.maxdesign.com.au/articles/inline/