Яка різниця між "& nbsp;" і ""?

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

Один - це нерозривний простір, а інший - звичайний простір. Нерозривний пробіл означає, що лінія не повинна бути загорнута в цій точці, подібно до того, як вона не буде загорнута в середині слова.

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

Суб'єкт  виробляє нерозривний простір, який використовується, коли ви не бажаєте автоматичного розриву лінії в цій позиції. У звичайному просторі є код символу 32, тоді як нерозривний пробіл має код символу 160.

Наприклад, коли ви відображаєте числа з пробілом як роздільник тисяч: 1 234 567, ви використовуєте нерозривні пробіли, щоб число не можна було розділити на окремі рядки. Якщо ви відображаєте валюту, і між сумою та валютою є пробіл: 42 шведських крон, тоді ви використовуєте нерозривний пробіл, щоб не отримати суму на одному рядку та валюту на наступному.

На додаток до інших відповідей тут, нерозривні пробіли не будуть "згортатися", як і звичайні пробіли. Наприклад, обидва

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

@Zoidberg має рацію, наприклад:

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

не відображатиме пробіл між розміткою заголовка, з

& nbsp ; 

зробить простір :)

Якщо у вас є розриви рядків, лінія не розривається, коли ви використовуєте $ bnsp; тому що це "пробій, що не порушується". Це може бути важливо, якщо у вас є певні найменування продуктів або такі, які завжди повинні писатися разом.

Це може бути цікаво, якщо ви (повинні) використовувати пробіл як роздільник цифр, наприклад 12344567, який відображається у Франції 12 344 567. Без лінії перервалася б посередині числа, дуже потворна. Тест: 12 344 567

TLDR; Крім прийнятої відповіді; Одне неявне, а одне - явне.

Коли 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 є чудова сторінка для відображення інших кодів символів .