HTML non-breaking space

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 – &nbsp 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 &nbsp 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 &nbsp 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 &nbsp 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 &nbsp 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:

If you liked this article or have any questions, feel free to leave a comment.