CSS reserves an unknown space in box model

I created a <div> with some text. I set the width and padding of the <div> and the font-size of the text inside it. Below is a snippet summarizing the conflict:

.container {
  width:     300px;
  padding:   10px;
  font-size: 16px;
}

<div class="container">
  Hello
</div>

According to the code, the total height (which is the offsetHeight in javascript) is 36. However, when I look at the layout in Chrome dev tools, the height reads 38. So, where did those 2px come from?

CSS reserves an unknown space in box model

2 Answers