为什么不同大小的文字有不同的对齐方式 [英] why text with different size have different alignment

问题描述

我有这样的行为：

为什么文字有这个空间吗？
我的目标是将文本与下面的文本对齐。

这里我做了：
CSS

  .btn-basic {
 font-size：5.8em; 
 white-space：nowrap; 
 border：中等none; 
} 
 
 .btn-basic p {
 font-size：0.3em; 
 line-height：1.0em; 
 white-space：nowrap; 
 
  

HTML

 < div class =btn-basic> 
免费WI-FI 
< p>免费。 Senza限制。支持流媒体。< / p> 
< / div> 
  

解决方案

由于字符符号在它们周围有空间， t

请参阅：

span {font-size ：144px;白颜色;背景：＃000; font-family：sans-serif;}

< span> ; F< /跨度><跨度> G< /跨度><跨度> FG< /跨度>

每个字形（和字体系列）的空间可能不同。结合你使用的字体大小，你会得到你当前正在经历的效果。

不幸的是，你很难做到这一点。

>

i have this behavior:

Why the text have that space? My goal is to left align the text with that one below.

Here what i have done: 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>

解决方案

Because character glyphs have space around them so they don't butt up against other character.

See:

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

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

That 'space' may be different for each glyph (and font family). Combine that with the font-sizing you are using and you get the effect you are currently experiencing.

Unfortunately, there is very little you can do about it.

这篇关于为什么不同大小的文字有不同的对齐方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！