Div height is greater than image height. Why?

Question

I have the following pure HTML, no CSS

<div>
  <img src="_img/_banner/banner1.jpg" />
</div>

The image banner1.jpg possesses 300px of height and to div no dimensions have been established.

Looking at the inspector to the imagem we have:

Looking at the inspector to the div we have:

It is noticeable that, although in the inspector there is no borders, paddings, margins, nothing to the image, it is somehow increasing the height of the div for 304px.

I would like to understand why, since there are no extra measures attached to the img nor to div.

I know what to apply display:block à image, solves the problem, but I can’t understand why!

Answer 1

The element img owns the property display availing inline default and, if not changed, this is the value. Elements inline are displayed following the same rules of the texts, of the typography, in this case, with the same spacing. The spacing provided for the typography are:

^{Image taken from typedeck with.}

Where, quite simply:

• rise to height is the space above the text, reserved for accents;
• cap height is the extra space used for upper case letters;
• x-height is the space used by the lower case letters;
• descend height is the space below the text, reserved for letters such as p, q, j, and others that have body part below the baseline;

What is important here is to notice the line in red: baseline. All elements inline are aligned with the baseline, including images, by default. The 4px that appear on div refer to the space provided for the descend height, so much so that if you vary the value of line-height of his div, this value will also change as it will change the value of descend height.

When changed the display for block, the image stops following the typography rules and the lower spacing no longer exists.

Example varying the value of line-height

div {
  line-height: 1.5em;
}

<div>
  <img src="http://i2.kym-cdn.com/photos/images/newsfeed/001/042/619/4ea.jpg" />
</div>