html - 使文本背景颜色完全适合文本，删除“填充”

Question

我需要能够在此文本周围创建一个没有在顶部或底部填充的黑色背景。目前，填充为 0，但我需要能够以某种方式剪辑它？我的意思是这是当前文本：

我需要它是这样的：

我不介意这是如何实现的，只要它仍然可以在上方和下方具有透明背景。

当前的CSS是：

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;

谢谢！

Answer 1

添加一个line-height低于 1.0em 的属性，例如：

line-height: 0.75em;

请注意，这不适用于内联元素，因此请确保将display其设置为blockor inline-block。

padding-top您可能还需要使用和/或微调垂直定位padding-bottom，具体取决于所使用的字体。

Answer 2

您需要有一个低于字体大小的行高：

padding:0em 0.2em 0em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;
font-size: 21px;
line-height: 15px;

确保显示是块或内联块。

MrSlayer 刚刚打败了我！

Answer 3

这是JSBin

使您的CSS如下

padding:0.2em 0.2em 0.2em 0.2em;
display:inline-block;
background-color:#000;
color:#FFF;
font-size:25px;  
line-height:8px

Answer 4

这个怎么样

小提琴

<div>Some text</div>

CSS

div
{
    position: relative;
    display: inline-block;
    color:#fff;
}
div:before
{
    content: '';
    display: inline-block;
    margin: auto;
    background: #000;
    width: 100%;
    height: 68%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: -1;       
}