How to insert "multiple spaces" between words in HTML without them being collapsed

Ever had a situation when writing HTML where you’ve inserted multiple white-space characters between words to create a bigger gap, only to realise it gets “collapsed” by the browser?

Like this:

<p>This   is   a   sentence   with   multiple   spaces,   but   it   won't   work!</p>
>>> Displayed output: This is a sentence with multiple spaces, but it won't work!

Don’t worry, because this can be fixed by using &nbsp;. It’s a HTML entity that represents a non-breaking space.
A non-breaking space, denoted by &nbsp; , prevents this collapse and maintains a space character’s width.

Each time &nbsp; is used, it equals 1 whitespace, so using it 3 times (&nbsp;&nbsp;&nbsp;) will insert 3 whitespace characters (etc…)

This can also be used in cases where you want to ensure that two words are not separated by a line break.

Please note that the use of it should be used sparingly and only when necessary. In most cases, it’s better to rely on CSS for spacing and layout control.