字母和元素结尾之间的空格？

Question

我为我的问题创建了一个小提琴：https://jsfiddle.net/e45gpw2a/

＆＃13;

＆＃13;

.text {
  font-size: 100px;
  font-family: Helvetica;
}

＆＃13;

<div>
  <p class="text">
    PR
  </p>
</div>

＆＃13;

＆＃13;

＆＃13;

正如您在检查器http://d.pr/i/CBFyZh中看到的那样，在字母的开头和段落元素的结尾之间有一个空格，但没有定义填充。

是否有机会删除该空格或是否与此字体相关且无法解决？

Answer 1

您可以在CSS中添加margin: 0;。

默认情况下，<P>标记为margin: 1em 0px，这意味着标记上方和下方的边线为1行（在这种情况下为100px），边缘为0。

＆＃13;

＆＃13;

.text {
  margin: 0;
  font-size: 100px;
  font-family: Helvetica;
}

＆＃13;

<div>
  <p class="text">PR</p>
</div>

＆＃13;

＆＃13;

＆＃13;

至于字母之间的间距，在字符之前总是有一小部分空格，这可能因字体而异，但它总是在那里。字体越大，差距越大。

您不能为第一个字符更改此间隙，但对于所有后续字符，您可以使用带有负像素值的letter-spacing来缩小差距。

＆＃13;

＆＃13;

.text {
  letter-spacing: -12px;
  font-size: 100px;
  font-family: Helvetica;
}

＆＃13;

<div>
  <p class="text">PR</p>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助