CSS reserves an unknown space in box model

Question

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?

Answer 1

The extra height is caused by the line-height property.

The initial value of line-height is normal.

This, according to the spec, tells browsers to set the value up to 1.2. This gives the text a bit of vertical padding inside the line box.

To resolve the issue, just add line-height: 1 to your code.