Why is extra whitespace appearing at the bottom of my HTML image?

When running the following HTML file on any browser and device (desktop, mobile device), got an odd result - there’s an extra 4px of whitespace added at the bottom of the image (or, at the bottom of the
).

=================

==================

However, once removed , it displays normally.

In other word, in Standard Mode, above code has problem and in Quirks Mode, it’s normal!

Why is this? Any hints are appreciated!