Remove all margin/padding between text and border

Issue

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

Answered By - Aaron.Bidwell