将文本周围的填充减少到零以下答案

【问题标题】：Reduce padding around text below zero将文本周围的填充减少到零以下
【发布时间】：2018-09-07 19:07:17
【问题描述】：

举个例子：

...有一个简单的元素如下：

<span style="font-size:40px; font-weight:bolder; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; border: 1px solid black; border-radius: 5px; background-color:#aaf">AB 123</span>

我想减少文本顶部和底部的填充量，即减少彩色背景。

但我已经处于最小填充（零）并且负数没有任何作用。我能做什么？

【问题讨论】：

标签： html css

【解决方案1】：

你可以调整line-height，使元素inline-block

span {
  font-weight: bolder;
  padding:0 10px;
  display:inline-block;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #aaf;
  line-height: 0.7em /* 0.7 * font-size */
}

<span style="font-size:40px">AB 123</span>
<span style="font-size:30px">AB 123</span>
<span style="font-size:20px">AB 123</span>

用另一种字体：

span {
  font-family:arial;
  font-weight: bolder;
  padding:0 10px;
  display:inline-block;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #aaf;
  line-height: 0.7em; /* 0.7 * font-size */
}

<span style="font-size:40px">AB 123</span>
<span style="font-size:30px">AB 123</span>
<span style="font-size:20px">AB 123</span>

【讨论】：

请注意，这是高度特定于字体的
我认为将行高减小到字体大小不是一个好习惯。
我们可以使用 line-height:0.75; 而不是使用像素
@Viira 如果你有其他解决方案，那就去吧:) .. OP 想要这个，所以我看不到其他方法
0.7em 不是解决方案，根据@Paulie_D 它是特定于字体的，但我猜作者得到了他想要的东西。

【解决方案2】：

因为 span 默认是内联元素所以我们把它转换成显示：内联块；并减少行高。

试试这个。

HTML：

<span>AB 123</span>

CSS

span {
    font-size: 40px;
    font-weight: bolder;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #aaf;
    line-height: 28px;
    display: inline-block;
}

【讨论】：