В чем разница между "& nbsp;" а также " "?

Оба они означают пространство, но есть ли разница?

Одно - неразрывное пространство, а другое - обычное пространство. Неразрывный пробел означает, что строку не следует переносить в этот момент, как и в середине слова.

Кроме того, как указывает Свенд в своем комментарии, неразрывные пробелы не сворачиваются.

Сущность  создает неразрывный пробел, который используется, когда вам не нужен автоматический разрыв строки в этой позиции. Обычный пробел имеет код символа 32, а неразрывный пробел - код символа 160.

Например, когда вы отображаете числа с пробелом в качестве разделителя тысяч: 1 234 567, вы используете неразрывные пробелы, чтобы число не могло быть разделено на отдельные строки. Если вы отображаете валюту и между суммой и валютой есть пробел: 42 SEK, то вы используете неразрывный пробел, чтобы не отображать сумму в одной строке, а валюту - в следующей.

В дополнение к другим ответам здесь неразрывные пробелы не будут «свертываться», как обычные пробелы. Например, оба

<p>Word1          Word2</p>

а также

<p>Word1 Word2</p>

будет отображать то же самое в любом браузере, а

<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

сохранит пробелы при рендеринге.

Не столько ответ, сколько примеров ...

Пример №1:

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

Пример №2:

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

И ссылку на скрипку .

Здесь вы можете увидеть рабочий пример:

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

а также

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

Тот же div, тот же текст, разные «пробелы»

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

против

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

Несколько обычных символов пробела (пробел, табуляция и разрыв строки) обрабатываются как один символ пробела :

Для всех элементов HTML, кроме PREпоследовательностей пробелов, разделяющих «слова» (мы используем термин «слово» здесь для обозначения «последовательностей непробельных символов»). При форматировании текста пользовательские агенты должны идентифицировать эти слова и размещать их в соответствии с правилами конкретного письменного языка (сценария) и целевого носителя.

Так

foo    bar

отображается как

foo bar

Но всегда отображается непрерывный пробел. Так

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

отображается как

foo   bar

Как уже упоминалось, вы не получите разрыв строки там, где есть «непрерывный пробел».

Также будьте осторожны, элементы, содержащие только "", могут отображаться неправильно, где & nbsp; будет работать. По крайней мере, в 6 (насколько я помню, у IE7 такая же проблема), если у вас есть пустой элемент таблицы, он не будет применять стили, например границы, к элементу, если нет содержимого или только белый Космос. Таким образом, следующие элементы не будут отображаться с границами:

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

Тогда как в этом примере будут отображаться границы:

<td>& nbsp;</td>

Хм, нужно было вставить пустое место, чтобы он корректно отображался здесь

Первый не обрабатывается анализатором HTML как пробел, а второй -. В результате не гарантируется, что "" будет отображаться в определенной разметке HTML, в то время как неразрывное пространство будет отображаться всегда.

  следует обрабатывать как пробел.

   следует обрабатывать как два пробела

'' можно обрабатывать как неинтересные пробелы

'' + '' можно обрабатывать как одиночный ''

  является штабелируемым, то есть вы можете создавать несколько пространств вместе.

HTML анализирует только одно пространство '', а остальные отбрасывает ...

Если вам нужно пять пробелов, поместите 5 x  

@Zoidberg прав, например:

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

не будет отображать пробел между разметкой заголовка, с

& nbsp ; 

сделаю пробел :)

При наличии разрывов строки линия не будет прервана при использовании $ bnsp; потому что это «неразрывное пространство». Это может быть важно, если у вас есть определенные названия продуктов или такие, которые всегда следует писать вместе.

Может быть интересно, если вы (должны) использовать пробел в качестве разделителя в числах, например 12344567, который отображается во Франции 12 344 567. Без этой линии линия обрывалась бы в середине числа, очень некрасиво. Тест: 12 344 567

TL; DR; В дополнение к принятому ответу; Один неявный, а другой явный.

Когда HTML-код, который вы написали или сгенерировал приложением / библиотекой / фреймворком, читается вашим браузером, он будет лучше всего интерпретировать то, что означает ваш HTML (который может варьироваться от браузера к браузеру). Когда вы используете коды объектов HTML, вы более специфичны для браузера. Вы явно говорите, что хотите отобразить символ для пользователя (а не то, что вы просто размещаете свой HTML-код, например, для облегчения чтения для разработчика).

Чтобы быть более конкретным, если бы выходной HTML был:

<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>

Браузер отобразит только один пробел между всеми этими словами (даже теми, которые имеют отступ для удобства чтения разработчиками.

Если, однако, вы поместите то же самое и только измените <p>тег на:

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

Затем он будет отображать пробелы, как вы проинструктировали более подробно. Есть некоторая история использования этих пространств для стилизации. Это использование несколько уменьшилось по мере развития CSS. Тем не менее, все еще есть допустимые применения для многих символьных сущностей HTML: предотвращение неожиданной / непреднамеренной интерпретации (например, если вы хотите отобразить код). У w3 есть отличная страница для отображения других кодов символов .