编辑跨度背景色的高度

Question

是否可以在我的跨度中编辑背景颜色的高度？

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;
    }

我想要做的是让高光为 1.8em。我不知道如何实现它而不是太乏味（即很多 div ）。

Answer 1

如果有人正在寻找如何将<span>元素文本的背景颜色扩展到比文本本身更高的答案，但仍然希望<span>内联，那么这些其他解决方案都不起作用，因为背景颜色不是受跨度的line-height或影响。height它仅受font-size和的影响padding。对于这种情况，这是一个正确的解决方案：

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>

Answer 2

您可以使用具有透明顶部和底部颜色的垂直线性渐变（我在示例中使用了红色）。

元素的高度是2em因为line-height，所以1.8em是 90%。使用两个透明条带（演示中的红色）创建一个渐变，每个条带的高度为 5%。其余 90% 将作为高亮颜色。

.highlight {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  background: linear-gradient(to bottom, red 5%, #4db6ac 5%, #4db6ac 95%, red 95%);
  line-height: 2em;
}

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