Question

采用以下示例：

...具有如下简单元素：

<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是默认的内联元素，所以我们将其转换为显示：inline-block;并降低行高。

尝试一下。

HTML：

value

CSS

<span>AB 123</span>

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

2 个答案: