This one is easy. There are mainly two types of boxes: block-level and inline. An inline element is designed to flow along with text. And of course with text, you have a baseline. The baseline is the invisible line that the letters appear to sit on, and letters like j, y and g have parts of their glyphs drawn below the baseline. This concept of a baseline is represented in HTML in each line box (an invisible horizontal box in which each line of text resides.) Thus when you have an image in a line box, the image rests on the baseline for that linebox. And this happens even if the image is the only thing in the linebox.
Unless you make the image block-level. To do that, you need to do something like
<img style="display: block;" >
Perl / MySQL / HTML+CSS