删除文本和边框之间的所有 margin/padding

Question

<div><span style="border-color: black; border-width: thin; border-style: solid;">
Com
</span><span style="border-color: black; border-width: thin; border-style: solid;">
pu
</span><span style="border-color: black; border-width: thin; border-style: solid;">
ter
</span></div>

最终结果：

如何删除文本和边框之间的所有 margin/padding 以便文本“亲吻”左右边框？

最终目标是在不改变单词外观的情况下将单词分解为音节

Answer 1

添加显示：inline-block 到 span

<div>
  <span style="display: inline-block; border-color: black; 
               border-width: thin; border-style: solid;">
    Com
  </span>
  <span style="display: inline-block; border-color: black; 
               border-width: thin; border-style: solid;">
     pu
   </span>
   <span style="display: inline-block; border-color: 
                black; border-width: thin; border-style: solid;">
     ter
   </span>
 </div>

Answer 2

只需删除 <span> 标签内的所有空格。

改变这个：

    <span style="display: inline-block; border-color: black; 
border-width: thin; 
border-style: solid;">
Com
</span>

对此：

    <span style="display: inline-block; border-color: black; 
border-width: thin; 
border-style: solid;">Com</span>

删除文本和边框之间的所有 margin/padding

Remove all margin/padding between text and border

html

css