html - Why div doesn't fit its height based on nested span height -

i've found problem can't understand. why div bigger nested span? thought div fit height content.

div {      border: 1px solid black;  }    span {      font-size: 9px;      border: 1px solid black;  }

<div>      <span>this test label</span>  </div>

it seems when font shrinking, parent div preserving line-height loaded with, set line-height on div same font-size , add pixel , align span vertically top, trick:

div {      border: 1px solid black;      line-height: 10px;    }    span {      font-size: 9px;      vertical-align: top;      border: 1px solid black;    }

<div>      <span>this test label</span>  </div>