Why doesn't line-height work on img elements?

Issue

MDN says line-height work on inline elements. Images are inline elements. Then why doesn't line-height work on img elements? Here is the jsfiddle in which line-height doesn't center the image.

Solution

The page you link to says:

On replaced inline elements such as buttons or other input elements, line-height has no effect.

img elements are replaced inline elements, so line-height has no effect on them.

You need an extra element if you want to set the line height of a line box around an image.

span {
  line-height: 200px;
}
div {
  outline: solid black 1px;
}

<div>
  Hello <span> <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt=""> </span> World
</div>

<div>
  Hello
  <img src="http://www.iana.org/_img/2013.1/iana-logo-header.svg" alt="">World
</div>

Answered By - Quentin