Edit the height of the background-color of span

Question

Is it possible to edit the height of the background color in my span?

HTML

<span class="highlight">Some highlighted text</span>

CSS

  .highlight{
font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.5em;
        background-color: #4db6ac;
        line-height: 2em;
    }

What I want to do is for the highlight to be 1.8em. I'm not sure how to implement this without it being too tedious (ie. lots of divs ).

Answer 1

If anyone is looking for an answer as to how to expand the background color of a <span> elements text to be taller than the text itself, but still want the <span> to be inline, then none of these other solutions will work, since the background color is not affected by the line-height or height of a span. It's only affected by the font-size and padding. Here would be a proper solution for that case:

body { 
    font-size: 1em; 
    line-height: 1.5em; 
}
span.highlight {
    background: yellow;
    padding: 0.25em 0; /* ('line-height' - 'font-size') / 2 */
}
span.no-padding { 
    padding: initial; 
}

<p style="width:400px">
  Here is a bunch of text that will have some highlighted text within it.
  <span class="highlight">
    Here is some highlighted text that will span multiple lines and will have a full height background color.
  </span> 
</p>
<p style="width:400px">
  Here is also some highlight text without the padding. 
  <span class="highlight no-padding">
    Here is some highlighted text without a full height background, regardless of having the same 'line-height'
  </span>
</p>