CSS如何使背景具有内容的大小答案

【问题标题】：CSS how to make the background to have size of contentCSS如何使背景具有内容的大小
【发布时间】：2021-11-11 16:33:52
【问题描述】：

我附加了一个带有文本的图像，我希望元素背景与文本具有相同的大小，这将与最高字母的大小相同。我找不到 css 属性来做到这一点。

这是我的预期结果：

【问题讨论】：

请阅读how to ask questions here。之后编辑问题以符合准则并提供minimal reproducible example 以获取调试详细信息。
您在寻找line-height: 1吗？
只需使用没有padding 属性的span .. <span style="background-color:#0000FF; color:#FFF; font-size:26px;">Our Offer</span>
如果你的 line-height 已经是 1 并且你得到了这个，那是因为你使用的字体。大多数字体在实际字母周围会有一点空间，所以使用背景颜色，你将无法做你想做的事。如果这只需要适用于短词，那么您可以使用另一个具有固定高度且具有蓝色背景颜色的元素来伪造背景，并给出您的文本位置，使其位于 bg 元素上方

标签： html css frontend

【解决方案1】：

只需使用没有填充属性的跨度..

<span style="background-color:#0000FF; color:#FFF; font-size:26px; padding: 0;">
    <a href="" style="color:#FFF; text-decoration:none;">
        Our Offer
    </a>
</span>

更新

正如@Huangism 提到的，字体上下都有自己的间距，例如为 g 或 j 上的摆动腾出空间。

我在此示例中定义了字体，因为您文档中的 CSS 可能与字体不匹配，并且上下间距不同。然后，您可以操纵高度和线高进行补偿，并达到所需的输出。请注意，我将跨度设置为inline-block，否则将忽略高度属性：

span {
  display: inline-block;
  font-size: 48px;
  background-color: #0000FF;
  color:#FFF;
  font-family: 'Times New Roman';
  line-height: 34px;
  height: 35px;
}

<span>
    <a href="" style="color:#FFF; text-decoration:none;">Our Offer</a>
</span>

【讨论】：

这个文本是一个链接（锚标签），它不起作用
当然可以..查看更新的答案。
不，还是一样
你可以看到我的片段“独立”工作。你显然有竞争的 CSS。使用您的开发人员控制台并调整值，直到找到竞争代码。
它不起作用，因为蓝色 bg 没有靠近字母的边缘。这取决于字体，大多数字体在字母周围总是有空格

【解决方案2】：

我想到了两种可能性。一个是更干净的，但它的顶部和底部仍然有轻微的间隙。另一个确实没有间距但是很不灵活。

1 个变体

.c {
  display: inline;
  background-color:blue;
  color: white;
  font-size: 34px;  
}

<div>  
  <p class="c">Our Offer</p>
</div>

2 变体

div.relative {
  position: relative;
  width: 165px;
  height: 28px;
  border: 3px solid #000;
  background-color: blue;
} 

div.absolute {
  position: absolute;
  top: -7px;
  left: -2px;    
  font-size:34px;
  color: white;
}

<div class="relative">
  <div class="absolute">Our Offer</div>
</div>

【讨论】：