One of the standard objects used in HTML is the non-breaking space. Many of you have encountered such a special symbol as the HTML non-breaking space –   when editing HTML documents. But most do not think how to use it and for what purpose it serves. Today we will learn what it is, when to use the HTML space between elements and when to avoid it. We’ll also share a few useful tips on how to use spacing in various forms of writing.
Let’s start figuring out with you what a non-breaking HTML space is, and where it will be useful in website layout.
What does non-breaking space mean?
A non-breaking space is a space that doesn’t go to a new line. Two words separated by   will be glued (not moved to a new line). This is useful when a violation of the position of words can interfere with the perception of the information as a whole.
The combination of using a non-breaking space HTML
Cases in which the use of a special symbol   will be applicable:
- When the layout of a web page needs to ensure that when viewed from screens with different resolutions the text is not redistributed, resulting in unwanted breaks:
10 000 $
Which might look like this:
10 000 $
To avoid such uncomfortable collapses, you should use the   object to glue “10000” and “$” together:
10 000 $
- When you need to create multiple indents in a row. If you want to use the regular space multiple times, the browser will always combine them to one, treating it as an error.
It is possible to get around this problem by using the required number of non-breaking HTML, which will give you the desired effect:
Price: 10 000 $
When not to use the non-breaking space
Agree, the above code is not very readable. Also, creating multiple spaces using   is bad design practice. What may look okay on your screen will almost certainly collapse uncontrollably on the user’s side because of the huge variety of screen sizes and resolutions.
Therefore, the non-breaking space is a useful way to connect characters together, but should probably only be used for that purpose.
Other spaces available in HTML
When separating words or other elements, you may not be limited to regular and non-breaking spaces. The list of available spaces is very long. Here are some of the most commonly used ones:
|&emsp13||3 character space|
|&hairsp||very thin space|
If you liked this article or have any questions, feel free to leave a comment.