1

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

enter image description here

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

gre_gor
  • 6,669
  • 9
  • 47
  • 52
etayluz
  • 15,920
  • 23
  • 106
  • 151
  • 2
    Those are span tags so you don't need to add any space or new line while writing that, all the spans should be in one line like this
    Computer
     – Simran Birla Jun 02 '22 at 17:23

2 Answers2

1

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>
Aaron.Bidwell
  • 69
  • 5
0

Simply remove any whitespace within the <span> tags.

Change this:

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

to this:

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