CODEWITHSUNDEEP
html
omg
omg

Reputation: 139862

What's the difference between " " and " "?

Both of them mean space, but is there any difference?

Upvotes: 216

Views: 505423

Answers (13)

Graeme Perrow
Graeme Perrow

Reputation: 57248

In addition to the other answers here, non-breaking spaces will not be "collapsed" like regular spaces will. For example:

<!-- Both -->
<p>Word1          Word2</p>
<!-- and -->
<p>Word1 Word2</p>
<!-- will render the same on any browser -->
<!-- While the below one will keep the spaces when rendered. -->
<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

Upvotes: 67

KellCOMnet
KellCOMnet

Reputation: 1859

Not an answer as much as examples...

Example #1: 

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello&nbsp;There
</div>

Example #2:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello There
</div>

And link to the fiddle.

Upvotes: 46

Marc
Marc

Reputation: 5508

TLDR; In addition to the accepted answer; One is implicit and one is explicit.

When the HTML you've written or had generated by an application/library/framework is read by your browser it will do it's best to interpret what your HTML meant (which can vary from browser to browser). When you use the HTML entity codes, you are being more specific to the browser. You are explicitly telling it you wish to display a character to the user (and not that you are just spacing your HTML for easier readability for the developer for instance).

To be more concrete, if the output HTML were:

<html>
   <title>hello</title>
   <body>
       <p>
           Tell me and I will forget. Teach me and I
           may remember.  Involve me and I will learn.
       </p>
   </body>
</html>

The browser would only render one space between all of these words (even the ones that have been indented for better developer readability.

If, however, you put the same thing and only changed the <p> tag to:

<p>Hello&nbsp;&nbsp;&nbsp;There</p>

Then it would render the spaces, as you've instructed it more explicitly. There is some history of using these spaces for styling. This use has somewhat been diminished as CSS has matured. However, there are still valid uses for many of the HTML character entities: avoiding unexpectedly/unintentionally interpretation (e.g. if you wanted to display code). The w3 has a great page to show the other character codes.

Upvotes: 0

alberto-bottarini
alberto-bottarini

Reputation: 1231

You can see a working example here:

http://codepen.io/anon/pen/GJzBxo

and

http://codepen.io/anon/pen/LVqBQo

Same div, same text, different "spaces"

<div style="width: 500px; background: red"> [loooong text with spaces]</div>

vs

<div style="width: 500px; background: red"> [loooong text with &nbsp;]</div>

Upvotes: 10

Brian Rasmussen
Brian Rasmussen

Reputation: 116401

One is non-breaking space and the other is a regular space. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word.

Furthermore as Svend points out in his comment, non-breaking spaces are not collapsed.

Upvotes: 267

foxhop
foxhop

Reputation:

&nbsp; is stackable, meaning you can create multiple spaces all together.

HTML will only parse one space '' and it drops the rest...

If you want five spaces, you would place 5 x &nbsp;

Upvotes: 1

ppuschmann
ppuschmann

Reputation: 235

When having line-breaks, the line will not break when you use an $bnsp; because it's a 'non-breaking space'. This can be important if you have certain product-names or such, that always shall be written together.

Can be interesting if you (have to) use a whitespace as delimiter in numbers, like 12344567, that is displayed 12 344 567 in France. Without the   the line would break in the middle of the number, very ugly. Test:12 344 567

Upvotes: 0

Guffa
Guffa

Reputation: 700222

The entity &nbsp; produces a non-breaking space, which is used when you don't want an automatic line break at that position. The regular space has the character code 32, while the non-breaking space has the character code 160.

For example when you display numbers with space as thousands separator: 1 234 567, then you use non-breaking spaces so that the number can't be split on separate lines. If you display currency and there is a space between the amount and the currency: 42 SEK, then you use a non-breaking space so that you don't get the amount on one line and the currency on the next.

Upvotes: 108

Pete
Pete

Reputation: 12553

As already mentioned, you will not receive a line break where there is a "no-break space".

Also be wary, that elements containing only a " " may show up incorrectly, where &nbsp; will work. In i.e. 6 at least (as far as I remember, IE7 has the same issue), if you have an empty table element, it will not apply styling, for example borders, to the element, if there is no content, or only white space. So the following will not be rendered with borders:

<td></td>
<td> <td>

Whereas the borders will show up in this example:

<td>& nbsp;</td>

Hmm -had to put in a dummy space to get it to render correctly here

Upvotes: 5

Gumbo
Gumbo

Reputation: 655189

Multiple normal white space characters (space, tabulator and line break) are treated as one single white space character:

For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.

So

foo    bar

is displayed as

foo bar

But no-break space is always displayed. So

foo&‍nbsp;&‍nbsp;&‍nbsp;bar

is displayed as

foo   bar

Upvotes: 10

CodingBarfield
CodingBarfield

Reputation: 3398

&nbsp; should be handled as a whitespace.

&nbsp;&nbsp; should be handled as two whitespaces

' ' can be handled as a non interesting whitespace

' ' + ' ' can be handled as a single ' '

Upvotes: 1

AbstractProblemFactory
AbstractProblemFactory

Reputation: 9811

@Zoidberg is right, example:

<h1>title</h1> <h2>date</h2>

will not display space between header markup, with 

& nbsp ;

will do space :)

Upvotes: 0

Zoidberg
Zoidberg

Reputation: 10323

The first is not treated as white space by the HTML parser, the second is. As a result the " " is not guaranteed to showup within certain HTML markup, while the non breakable space will always show up.

Upvotes: 3

Related Questions