insert 'padding' between characters in HTML that functions as white space

Question

my question may seem strange but I am trying to do something like this with HTML:

word1 word2 word3
  A     B     C

This by itself is easy but I want no space characters between A,B,C so that if a user searches by typing ABC, he can locate them. In other words, I want no white space between the characters but I would like them to each have a distance of X-characters from the next.

Is this feasible? Maybe with some css magic?

Thanks in advance

Answer 1

You can insert padding… with padding! (or margin for inline elements)

<span>A</span><span>B</span><span>C</span>

CSS:

span {
    margin: 0 4px;
}

Actual padding (for borders and stuff):

span {
    display: inline-block;
    padding: 0 4px;
}

Or, if you're too lazy, you can use letter-spacing.

<span>ABC</span>

CSS:

span {
    letter-spacing: 8px;
}

Answer 2

You can use letter-spacing property

Something like

<span>ABC<span>

CSS

span {
 letter-spacing:20px;
}