CODEWITHSUNDEEP
htmlcsslayout
Wais Kamal
Wais Kamal

Reputation: 6180

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?

Upvotes: 4

Views: 80

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371271

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.

Upvotes: 4

davidatthepark
davidatthepark

Reputation: 1365

Browsers implement a default line height to text. So in this case there is 1 pixel below and above the text. You can change this by setting line-height: 16px;

Upvotes: 3

Related Questions