Why is em not behaving as defined

Question

I may be new to em in CSS, but the following example seems strange...

Docs say that 1em is equal to the font-size. Everything in my example is default. So 8em should be the size of 8 lines of text, correct?

#my-div {    background-color: red;    height: 8em;  }

<div id="my-div">    One<br/>    Two<br/>    Three<br/>    Four<br/>    Five<br/>    Six<br/>    Seven<br/>    Eight  </div>

https://jsfiddle.net/q8vs7r4u/1/

There are 8 lines, but 8 em only covers 7 of them. It seems that 1em is only covering 7/8 of a line, or something...

Why? What am I doing wrong?

Answer 1

The default line-height is not 1 so each line is taller than the font-size of the text inside it.