如何移除文本与边框间margin/padding 实现文本紧贴左右边框

当前代码无法实现文本和边框紧密贴合，主要由两个原因导致：

• <span>标签与内部文本、相邻span之间的换行/缩进会被浏览器解析为空白字符，额外生成间距
• 行内元素默认受行高、字体预设留白影响，默认盒模型下无法精准消除边框和文本的空隙

具体修正步骤 #

• 清空所有span标签之间、标签与包裹文本之间的换行、多余空格，避免浏览器生成额外空白节点
• 给所有带边框的span显式重置内外边距：padding: 0; margin: 0
• 将span设置为行内块级元素，设置行高为1，消除行高带来的上下额外留白
• 重置字符、单词间距，关闭字体默认字距调整，避免字体预设规则生成额外空隙

修正后可直接运行的代码 #

<div>
  <span style="border: thin solid black; padding: 0; margin: 0; display: inline-block; line-height: 1; letter-spacing: 0; word-spacing: 0; font-kerning: none;">Com</span><span style="border: thin solid black; padding: 0; margin: 0; display: inline-block; line-height: 1; letter-spacing: 0; word-spacing: 0; font-kerning: none;">pu</span><span style="border: thin solid black; padding: 0; margin: 0; display: inline-block; line-height: 1; letter-spacing: 0; word-spacing: 0; font-kerning: none;">ter</span>
</div>

补充说明 #

如果按上述代码调整后仍存在极细的左右空隙，属于字体文件内置的字符侧轴承（预设的字符左右留白），可以通过给span添加极小的负左右边距抵消，例如设置margin: 0 -0.5px，数值可根据实际使用的字体微调，不会改变单词原本的显示外观。

内容的提问来源于stack exchange，提问作者etayluz