Where is the extra height that a div element contains an inline-block element with a font-szie attribute?

<style>

span {
    display: inline-block;
    font-size: 12px;
}

</style>

<div>
    <span>hello </span>
    <span>world</span>
</div>

clipboard.png

clipboard.png

where did the extra height come from?

Apr.11,2021

you can tell where it came from by setting the line-height of div to 1em.

Menu