Make div exact height as text-CodePudding

I create a div containing some text with some simple css:

.textBox {
  display: inline-block;
  font-size: 50px;
}

The container is simply:

<div > 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.

CodePudding user response：

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 >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 >
  <mark></mark>
  Test
</div>

<br>
<br>

<div >
  <mark></mark>
  Meet
</div>

<br>
<br>

<div >
 <mark></mark>
 Testing
</div>

CodePudding user response：

You can use:

height: fit-content;

like this:

.textBox {
  display: inline-block;
  font-size: 50px;
  height: fit-content;
}

CodePudding user response：

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