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

Question

举个例子：

https://jsfiddle.net/uq57mn0a/

。具有如下简单元素：

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

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

但是我已经处于最小填充(零(，负数无济于事。 我能做什么？

Answer 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>

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