Question

我有以下CSS代码，该代码导致文本上方有12px的间距，文本下方有15px的间距。

我尝试将填充和边距设置为0px，还设置了行高。

如何使我的文字适合div（无间隙）？

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0 !important;
  margin:0 !important;
}

<div>THIS IS A TEST</div>

Answer 1

如果突出显示文本，您会注意到垂直填充实际上是字体的部分。

一种解决方案是指定一个line-height。（我还添加了padding-top来抵消字体不均匀的垂直填充。）

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0;
  margin: 0;

  line-height: 0.73em;
  padding-top: 0.03em;
}

<div>THIS IS A TEST</div>

Answer 2

如上所述，您可以使用line-height消除该间隙，但重要的是要认识到，为了渲染延伸到代码段中其他字符之上或之下的许多其他字符，这是必需的。如果将其删除，则可能会导致渲染问题，具体取决于div的文本内容：

例如，此：

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding:0 !important;
  margin:0 !important;
}

<div>TEST yqj ÑÜ</div>

最终如下：

div {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  padding: 0;
  margin: 0;
  padding-top: 0.023em;
  line-height: 0.73em;
}

<div>TEST yqj ÑÜ</div>

Answer 3

行高是最好的选择。

使用line-height：40px;

.divclass {
  background-color: blue;
  font-family: Arial;
  font-weight: bold;
  color: white;
  font-size: 4em !important;
  line-height: 40px;
}

<div class="divclass">THIS IS A TEST</div>

}

调整行高以实现所需的输出。

Answer 4

使用 .test {line-height：0px; } 用于消除线距。

使用 .test {字距：0px;} 用于消除单词间的空白

并使用 .test {字母间距：0px； } 用于消除字母到字母的间隙

如何消除字体间隙？

4 个答案: