NBSP - what is it? An empty space that matters

Table of contents:

NBSP - what is it? An empty space that matters
NBSP - what is it? An empty space that matters

A simple space and a special character are similar in only one way: they mean the separation of words, tags, attributes, and other markup elements. However, the use of a regular space is relevant only to improve the readability of the page content and for the convenience of working with it in a text editor.

nbsp what is it
nbsp what is it

For the browser and its JavaScript language, the number of spaces between words, tags and other elements does not matter.

Apply spaces

Space is the most needed character. Although it is "empty", but very useful. Even in the good old days, when characters like "line feed" and "carriage return" were important, any number of spaces anywhere in the code was used only to increase its readability. But the empty space itself was "highly appreciated."


Correctly manipulate words, keywords and syntactic constructions, distinguish program code from comments to this day, no compiler(interpreter) did not learn. Without noble lexemes like Pascal (pascal) ":=" and Peel (PL / 1) ";", the currency-oriented innovation "Pehape" (PHP) - "$" in the variable name managed, except perhaps "Fortran", in which each operator was to be on a separate line.

What has been said in principle means that artificial languages still lack the natural ability to separate words and phrases, to distinguish phrases from sentences, and in the latter to capture the complete meaning.

But a simple space can be any number on any line, and it has a mandatory numeric code. A space is not an empty space either in the code or in the value of a variable. This is a very important symbol. Therefore, nbsp also matters. What's this? Now consider.

The ideal system: something that doesn't exist, but is so necessary

Many areas of writing and content output require strict adherence to formatting rules. A simple example is lists.

Wrong list:

  • __first line;
  • _second line;
  • third line.

Correct list:

  • first line;
  • second line;
  • third line.

Here the character "_" denotes a simple space, which may be specified by mistake or formed due to the text alignment of the list item on both sides of the paragraph.

It is important that the content of the list element should immediately follow the number. In particular, the MS Word text editor was still at the very beginning of itsexistence suggested using a non-breaking space (key combination ctrl+"space") to disable the break between line items.

A non-breaking space stuck together two adjacent words, and it is not at all necessary that they both be such. And in the case of lists, when the element number is not included in the content of the paragraph, gluing is performed to the beginning of the line.

nbsp 5
nbsp 5

At the time when MS Word was already a success, the hypertext language was still being formed, but the presence of special characters in it was initially assumed. Another thing   - what it is and why it is needed, it was not immediately clear.

Use in headings

A correct title does not break, and the words in it do not wrap. It is centered or aligned to one side or the other. It is difficult to do without the use of a non-breaking space.

In hypertext language it would look like this:

7. 5. FreeBSD Installation Guide

On an HTML page in a browser, the heading number will look like this: "7. 5. " and all headings designed in this way will be exactly the same.

There is a point to pay attention to if the title uses text and an image. The browser outputs everything sequentially, exactly as determined by the incoming stream. The img tag is located at the very beginning of the line, but in order for the text to be placed immediately after the image, you need to take into account its width.

Use in page content

Absolute positioning of text in rare cases can help. Usuallyheadings and text go in the same stream, but with different tags, such as h2 and p.

To move the text to the right of the picture, it is very convenient to apply several.

In the following example, you need to display the icons of the types of uploaded files and write the corresponding extensions next to it in text.

The author's example is not a picture
The author's example is not a picture

Coding done in PHP using nbsp. What is it and how is it used? Now it becomes clear. Similarly, the non-breaking space character is used in JavaScript.

Application in strings

When processing strings (both on the server and inside the browser), the non-breaking space is not used - it's too expensive to use six whole " " instead of one meaningful character " ". However, when the string is sent to output, to the browser stream, all whitespace characters must be re-encoded into the proper number of non-breaking spaces.

Output in echo or print_r sequence more than one space will not have the desired effect and the content will "creep". For example (PHP):

  1. echo "2____Hello!"; // here "_" stands for " ".
  2. echo "2 Hello!"

Will have a different effect if the tag has justify alignment. In the first case, the number 2 will be printed from the left edge of the block into which the output was made, and the text "Hi!" - from the right.

NBSP - what is it and how to use it? Important information

Meanwhile, it's not the spaces that are the problem. There are actually a lot of non-printable characters, and farthey are not always used correctly. It is worth remembering how MS Word users draw up documents. When you need to write the word "director" on the left, and his last name on the right, the vast majority sculpt several tab characters in a row - quickly and efficiently.


Instead of setting the value of the tab character and the alignment on it correctly, the user presses tab several times and gets the desired effect.

A similar situation in the HTML markup language. Many developers do not use special characters correctly, do not apply the necessary styles in the right way, and the result: "Hello World, I made a mistake for the 3rd time …" will be stretched across the entire width of the block in which this line was displayed.

If you recode the string into "Hello World, I made a mistake for the 3rd time…" - the result will be exactly what it should be.

nbsp 3
nbsp 3

Knowing and using special characters is a very good idea. Especially if you have a desire to make effective and high-quality pages in which the content is placed in a quality and neat way.

Popular topic

Editor's choice