Why does a div not match its height depending on the height of the nested span
I just found a problem that I just can't figure out. Why is this div larger than the nested range? I thought the div would fit its height to its content.
div {
border: 1px solid black;
}
span {
font-size: 9px;
border: 1px solid black;
}
<div>
<span>This is test label</span>
</div>
source to share
It looks like when the font shrinks, the parent div keeps the initial line-height originally loaded, sets the line-height to the div the same as the font size, and adds an extra pixel and aligns the range vertically on top, it will do the trick:
div {
border: 1px solid black;
line-height: 10px;
}
span {
font-size: 9px;
vertical-align: top;
border: 1px solid black;
}
<div>
<span>This is test label</span>
</div>
source to share
Add display: table-cell
to tag span
. There is no such behavior for div
in which it automatically matches its child content.
div {
border: 1px solid black;
}
span {
font-size: 9px;
border: 1px solid black;
display: table-cell;
}
<div>
<span>This is test label</span>
</div>
If you want width to div
match width span
add display: table-cell
in div tag.
source to share