如何调整字母背景的大小？答案

【问题标题】：How to adjust size of letter background?如何调整字母背景的大小？
【发布时间】：2019-10-30 00:43:16
【问题描述】：

我有一个带有背景颜色的单词。这很好，只是我希望背景颜色相对于单词具有一定的大小。简单地把background-color: blue,给这个词一个背景颜色，display: inline-block使颜色完全适合这个词。到现在为止还挺好。问题是，一旦我增加字体大小，背景颜色形状就会变形，要么变成覆盖一半单词的正方形，要么变成覆盖宽度但不覆盖高度的线条。

@media (min-width: 768px) {
  .about5 {
    color: red;
    background-color: blue;
    display: inline-block;
    position: relative;
    font-size: 90px;
    left: 320px;
    font-weight: bolder;
    transform: rotate(90deg);
    bottom: 100px;
    z-index: 3 !important;
  }
}

&lt;div class="about5"&gt;About&lt;/div&gt;

这给出了一个蓝色的背景颜色，它覆盖了一半的单词而不是另一半。

那么我如何让它覆盖整个单词并完全适合，甚至可能添加一些填充？

我可以只应用宽度和高度还是有其他方法？

谢谢。

页面为here，根据桌面移动设备而有所不同。

【问题讨论】：

刚刚用 codepen 尝试了你的代码，背景覆盖了整个单词。但我没有完全看到它，需要在你的代码之前添加一些 div 标签，我认为问题不在于背景，而在于标签位置和周围的其他标签。例如，您的单词可能会溢出另一个标签，而背景不会溢出。
谢谢。请查看已编辑的问题和网站。

标签： html css

【解决方案1】：

我检查了您网站上的元素，发现您的about5 类具有width 和height 的属性都设置为100px。您指定了这些维度，或者它们是从父元素继承的。仅删除您的height 元素，然后将width 更改为auto 并添加padding: 3%。这就是最终在您网站的 Inspector 中为我工作的原因，尽管代码在这个 JSFiddle 中对我来说工作得很好：https://jsfiddle.net/z0keyftb/

【讨论】：

谢谢，但这会如何影响我的背景大小？
谢谢。因此，如果我未设置宽度和高度，那么它应该可以工作吗？
这导致我提出一个后续问题。调整宽度和高度也会调整字体大小吗？如果是这样，我如何定位背景颜色的大小？谢谢
所以我只是取消了宽度和高度，虽然它适用于移动设备，但桌面仍然有一条线穿过它并且没有覆盖整个单词。这里4309.co.uk/about-us
@Newstack 我收回了。仅删除您的height 元素，然后将width 更改为auto 并添加padding: 3%。事实证明，当它在我的 JSFiddle 中起作用时，以某种方式在 Inspector 中摆脱这两个不起作用。