Remove all margin/padding between text and border

user_1545308 0
Viewed 50

<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

css html
2 Answers

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

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