Remove all margin/padding between text and border

June 2, 2022

<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>

The end result:

How do I remove all margin/padding between text and border so that the text will "kiss" the left and right borders?

The end goal is to break the word down to its syllables without alternating the appearance of the word

>Solution :

Add display: inline-block to the 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>