I have the following pure HTML, without CSS
<div>
<img src="_img/_banner/banner1.jpg" />
</div>
The banner1.jpg image has 300px height and div has not been set.
Looking at inspector to imagem we have:
Lookingatinspectortodivwehave:
Note that although in the inspector there is no borders , paddings , margins , nothing for the image, it is somehow increasing the height of div to 304px .
I would like to understand why, since there are no extra measures attached to either img or div .
I know that applying display:block to image solves the problem, but I can not understand why!