我有一个带有背景颜色的词。这很好，只是我希望背景颜色相对于单词有一定的大小。简单地放置 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;
}
}<div class="about5">About</div>这给出了蓝色的背景颜色，覆盖了单词的一半但没有覆盖另一半。
那么我如何让它覆盖整个单词并完全适合，甚至可能添加一点填充？
我可以只应用宽度和高度还是有其他方法？
谢谢。
页面是here它因桌面移动设备而异。
最佳答案
我检查了您网站上的元素，发现您的 about5 类的属性 width 和 height 都设置为 100px。您指定了这些尺寸，或者它们是从父元素继承的。仅删除 height 元素，然后将 width 更改为 auto 并添加 padding: 3%。这就是我在您网站的检查器中最终为我工作的原因，尽管代码在这个 JSFiddle 中对我来说工作得很好:https://jsfiddle.net/z0keyftb/
关于html - 如何调整字母背景的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58617283/