CODEWITHSUNDEEP
htmlcss
a86356
a86356

Reputation: 121

why box height is greater than line-height

* {
  margin: 0;
  padding: 0;
}

div {
  line-height: 30px;
}

a {
  font-size: 12px;
}
<div>
  <a href="">测试</a>
</div>

I believe the content height is the same as line-height which is 30px. But actually in Chrome, it's 32px. Why is that?

Upvotes: 4

Views: 2649

Answers (2)

Edison Biba
Edison Biba

Reputation: 4433

Because the line-height depends in font-size Check this jsfiddle i just changed the font-size and the height is 30px

also you need vertical-align: middle; for the <a> so the space from top and bottom to be equal

Upvotes: 1

jedrzejginter
jedrzejginter

Reputation: 412

Because <a /> has it's own line height, which is above 1.0.

Add this line in CSS:

a {
    /* current styles */
    line-height: 1;
}

http://codepen.io/anon/pen/KrERPP

Upvotes: 3

Related Questions