为什么不同大小的文本有不同的对齐方式答案

【问题标题】：why text with different size have different alignment为什么不同大小的文本有不同的对齐方式
【发布时间】：2016-08-05 18:57:45
【问题描述】：

我有这种行为：

为什么文本有那个空格？我的目标是将文本与下面的文本左对齐。

这是我所做的： CSS

.btn-basic {
  font-size: 5.8em;
  white-space: nowrap;
  border: medium none;
}

.btn-basic p {
   font-size: 0.3em;
   line-height: 1.0em;
   white-space: nowrap;
}

HTML

 <div class="btn-basic">
   FREE WI-FI
   <p>Gratis. Senza limiti. Anche in streaming.</p>
 </div>

【问题讨论】：

你给它们设置了不同的样式，所以边距是有点预期的。尝试给它 0 padding/margins。
文本上没有边距，容器中只有一个内边距。但是我已经尝试过，无事可做。
正如@Paulie_D 所建议的，这可能是字形“问题”。您是否尝试突出显示“F”以检查它是否为真？
@Paulie_D 好的，它们有不同的大小，但是你知道一种方法可以在左边对齐它们吗？还是我必须重写 html？
这与 HTML 无关...字体在字符周围有空格，因此它们不会相互碰撞。不幸的是，您几乎无能为力。

标签： html css text alignment

【解决方案1】：

因为字符字形周围有空间，所以它们不会与其他字符对接。

见：

span {
  font-size: 144px;
  color: white;
  background: #000;
  font-family: sans-serif;
}

<span>F</span>
<span>G</span>
<span>FG</span>

每个字形（和字体系列）的“空格”可能不同。将其与您正在使用的字体大小相结合，您将获得当前所体验的效果。

很遗憾，您对此无能为力。

【讨论】：

感谢您澄清问题！我正在尝试找出解决方法