Make div exact height as text - html

Question

I create a div containing some text with some simple css:
.textBox {
display: inline-block;
font-size: 50px;
}
The container is simply:
<div class="textBox"> Test </div>
Nevertheless, the text isn't perfectly vertically centered within the div. There are 13px above and 11px below. Hence I would like the height of the div to be exactly as the height of the text.

Answer 1

So that's pretty hard. As a lot of people suggested you should probably consider line-height. But the problem with that is that the default styling rules won't know what letters you're gonna use. For example are there normal captials like M or maybe you'd use something like Â, then it needs to be bigger right? Or Q and it needs to be lower.
It really is too bad that there isn't any shrink-to-text property in this case. Maybe line-height with some trial and error will be enough for you.
.textBox {
display: inline-block;
background-color: darkcyan;
font-size: 50px;
line-height: 0.68em;
}
<div class="textBox">Test</div>
Not sure what your intened result should be. But if you want to highlight text for example, even line-height isn't precise. In that case I fall back at a helper tag that I'll style to fill the background behind my text. It's a bit more code though and as shown in the example for each font you need to find the correct settings again.
/* Setup textBox properties */
.textBox {
display: inline-block;
position: relative;
}
.textBox{ font-size: 50px; }
.textBox:hover{ font-size: 200px; }
/* Setup default properties for the marking*/
mark{
background-color: darkcyan;
position: absolute;
z-index: -999;
}
/* Specific setting first font-family */
.serif{
font-family: serif;
}
.serif mark {
height: 0.68em;
top: 0.25em;
left: 0.03em;
width: calc(100% - 0.03em);
}
/* Specific setting second font-family */
.sans-serif{
font-family: sans-serif;
}
.sans-serif mark {
height: 0.73em;
top: 0.2em;
left: 0.08em;
width: calc(100% - 0.08em);
}
/* Specific setting last font-family */
.verdana{
font-family: Verdana, sans-serif;
}
.verdana mark {
height: 0.94em;
top: 0.28em;
right: 0.09em;
width: calc(100% - 0.09em);
}
<div class="textBox serif">
<mark></mark>
Test
</div>
<br>
<br>
<div class="textBox sans-serif">
<mark></mark>
Meet
</div>
<br>
<br>
<div class="textBox verdana">
<mark></mark>
Testing
</div>

Answer 2

You can use:
height: fit-content;
like this:
.textBox {
display: inline-block;
font-size: 50px;
height: fit-content;
}

Answer 3

Use the property ,height : fit-content ; to the div