【问题标题】:How can I remove the space between a character in HTML? Padding doesn't work如何删除 HTML 中字符之间的空格?填充不起作用
【发布时间】:2017-02-12 22:28:42
【问题描述】:

即使我将填充添加为 0px,为什么在字母“അ”之前还有空格(标记为红色)?

<span style="margin:0;padding:0;border:1px solid blue;font-size:128px">അ</span>

【问题讨论】:

标签: html css fonts padding


【解决方案1】:

那个空格是字体的一部分。在其上使用否定的 letter-spacing margin-left 以将其删除。

Example

注意:这只会将整个跨度向后移动几个 px。实际上,空间仍然存在,无法正确移除。

【讨论】:

  • 但这取决于字体。最好确保在使用其他字体时不会出现重叠。
  • 你只是治标不治本。
  • @hakre:正如那句老话:这不是错误,而是功能!
【解决方案2】:

在排版中,出于美观和可读性的考虑,通常会调整字符之间的间距。空格甚至在常见的 ascii 字母中也存在:

<span style="margin:0;padding:0;border:1px solid blue;font-size:128px;letter-spacing:0px;">a</span>

但是空格是不同的,因为变量不同,比如上一个字符和下一个字符是什么。

您可以通过使用否定的paddingletter-spacing 来获得一些结果

More info

【讨论】:

  • letter-spacing 不会删除空格,相反,它更像是每个字母的边距。
  • 是的,我知道,但只能将边距应用于跨度,而不是跨度内的单个字母。这很棘手。链接的文章深入探讨了这个主题。
【解决方案3】:

使用内联定位会产生空白,而跨度始终是内联元素。解决方法在这里:https://css-tricks.com/fighting-the-space-between-inline-block-elements/

你看过 lettering.js 吗?它是一个专门用于排版的 jquery 插件。

【讨论】:

  • 虽然您的答案是 100% 正确的,但如果该链接被移动、更改、合并到另一个链接或主站点消失,它也可能 100% 无用... :-( 因此,请edit您的回答,并将链接中的相关步骤复制到您的回答中,从而保证您在本站100%的生命周期内回答!;-)您始终可以将链接留在答案底部作为材料来源...
猜你喜欢
  • 1970-01-01
  • 2012-06-19
  • 1970-01-01
  • 2012-07-20
  • 1970-01-01
  • 1970-01-01
  • 2013-09-23
  • 1970-01-01
  • 2015-03-12
相关资源
最近更新 更多