html - Why images makes a gap around?

Question

I'd like to ask, why there is a gap around the images. Is there something about this behaviour in the specification?

Simple code where you can see the gap between images:

<style>img {width: 100px; height: 100px; background: red;}</style>    

<img><br>
<img><br>
<img>

http://jsfiddle.net/sfptspj0/

I know that there is more posibilities how to remove this gap:

1. display: block;
2. float
3. vertical-align

But I want to know why there is the gap, not how to remove that.

Any ideas?
Thanks.

Answer 1

If an image is displayed inline, it leaves a slight space below it. This is because the image is placed on the baseline of the text, and below the baseline there should be some more space for the descender characters like g, j or q.

Source: http://www.schoonzie.com/rogue-padding-below-images