line-height property on html element alters elements

[jferrettiboke]

Description

The line-height property on html element is altering the element heights.

There is a workaround that works for me. If I set line-height to 0 on the html element, it is solves the issue but I think this should be fixed on the core.

Reproduction

To show you up what I am talking about, I created a parent div with a background color which contains a img.

<div class="bg-blue">
  <img src="https://images.unsplash.com/photo-1472491235688-bdc81a63246e?auto=format&fit=crop&w=200" alt="Cat">
</div>

Expected

It should not alter the height of my div at all. In other words, the blue area should not appear.

[LostKobrakai]

Images are inline elements by default and are placed in the baseline, see here: https://jsfiddle.net/62fk1dc8/
To prevent this behaviour set the image to display: block

[jferrettiboke]

Alright! I forgot that... 😅 Thanks @LostKobrakai.

[adamwathan]

Thanks for helping @LostKobrakai! Gonna close this since this is just normal CSS behavior.