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

【问题标题】：make text background colour fit text exactly, removing 'padding'使文本背景颜色完全适合文本，删除“填充”
【发布时间】：2013-07-30 16:49:37
【问题描述】：

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

我需要它是这样的：

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

当前的 css 是：

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

谢谢！

【问题讨论】：

负填充怎么样？能行吗？
CSS 不支持负填充，除非我错了？
我不知道，我只是假设它可以，因为负边距可以正常工作。当然，我可能是错的。
这听起来可能很傻，但是您是否考虑过使用图片？还是文本必须是动态的？
Remove white space above and below large text in an inline-block element 的可能重复项

标签： html css

【解决方案1】：

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

line-height: 0.75em;

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

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

【讨论】：

Mac 上的 Chrome。定位已关闭。
为我工作！谢谢，太简单了，还算出来，如果你使用高度和线高，你可以进一步微调位置
@BenM 它适用于 Mac Chrome 28。我 updated your fiddle 通过将行高减少到 0.60em 并且底部没有黑线。显然，line-height 需要根据使用的字体进行微调，甚至使用 padding-top 和 padding-bottom 进一步调整。

【解决方案2】：

这个怎么样

FIDDLE

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

确保显示是块或内联块。

MrSlayer 刚刚打败了我！

【讨论】：