使文本背景色与文本完全匹配，去除“填充”。

Question

我需要在这段文字周围创建一个黑色背景，但是顶部和底部没有填充。目前，填充为0，但我需要以某种方式进行裁剪？我的意思是当前的文本如下所示： 我需要它变成这样： 我不介意如何实现这一点，只要它仍然可以在上下具有透明背景。

当前CSS为：

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

谢谢！

- mbdavis

---

负边距怎么样？可以行吗？ - MightyPork

CSS不支持负边距，除非我错了？ - mbdavis

我不知道，我只是假设它可以，因为负边距运作良好。当然，我可能是错的。 - MightyPork

这可能听起来有些傻，但你考虑过使用图像吗？或者文本必须是动态的吗？ - UweB

可能是在inline-block元素中删除大文本上方和下方的空白的重复问题。 - isherwood

Answer 1

添加一个line-height属性，其值要比1.0em小，例如：

line-height: 0.75em;

请注意，这在内联元素上不起作用，因此请确保将display设置为block或inline-block。
根据所使用的字体，您可能还需要使用padding-top和/或padding-bottom对垂直定位进行微调。

- jeffjenx

---

Mac上的Chrome浏览器，定位不准确。 - BenM

可以用这个方法！谢谢，太简单了，我还发现如果使用高度和行高，你可以进一步微调位置。 - mbdavis

@BenM 它在 Mac Chrome 28 上运行良好。我通过将行高减少到 0.60em 来更新了您的 fiddle，并且底部没有黑线。显然，行高需要根据所使用的字体进行微调，并通过 padding-top 和 padding-bottom 进一步调整。 - jeffjenx

Answer 2

您需要将行高设置为小于字体大小：

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

请确保显示为块级元素或行内块元素。

MrSlayer刚好比我快！

- Abhitalks

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

- Naveen Kumar Alone

Answer 4

这个怎么样？

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

- Danield