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?
<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
. It’s a HTML entity that represents a non-breaking space.
A non-breaking space, denoted by
, prevents this collapse and maintains a space character’s width.
is used, it equals 1 whitespace, so using it 3 times (
) 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.