Подтвердить что ты не робот

Когда пробелы в HTML?

пример 1

<div><button>one</button><button>two</button></div>

<div>
    <button>one</button>
    <button>two</button>
</div>
​

В первом div нет пробела между двумя кнопками, во втором -.

Теперь рассмотрим еще один пример:

пример 2

<div>a</div>
<div> b</div>​​​​​​​​​​​​

Перед b нет пробела.

пример 3

a<b> bold</b> man

Теперь пробелы перед bold значительны

пример 4

a <b> bold</b> man

Теперь только одно из пространств (после "a" или "жирный" ) является значительным.

Вопрос

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

4b9b3361

Ответ 1

Реальность несколько сложная. Есть две части

  • Что делает синтаксический анализ.
  • Что делает рендеринг.

Разбор фактически удаляет очень мало пробелов во время разбора текста (в отличие от разметки). Он будет удалить начальный символ строки в начале <textarea> и <pre> элементов, а также недействительный элемент <listing> но об этом.

Jukka ссылается на раздел HTML 4.01 B.3.1 Разрывы строк, говорящие, что "разрыв строки сразу после стартового тега должен быть проигнорирован, так как строка должна прерываться непосредственно перед конечным тегом", но это не нормативное приложение, и браузеры не следуют за ним, за исключением трех элементов, упомянутых выше.

Это можно продемонстрировать с помощью примера Jukka здесь при разрыве строк без пробелов. Обратите внимание на узлы #text: вокруг кнопки elmeents на древовидном отображении и что, если разрывы строк удалены, узлы "#text:" больше не отображаются.

Мы также видим, что правило не применяется с использованием этого первого примера из спецификации здесь. Добавив display:pre, ясно, что разрывы строк не совсем игнорируются, но что отображение двух примеров одинаково просто является свойством обработки белого пространства по умолчанию white-space:normal

Что приводит нас к соответствующей спецификации, которая 16.6.1 Модель обработки "белого пространства" в спецификации CSS. Это охватывает систематические правила, которые должны применяться к текстовым символам для каждого из значений белого пространства.

Ответ 2

Полный ответ на вопрос "Когда делает пробел в HTML?" был бы довольно длинным и подробным и должен был бы обсуждать такие вещи, как пробелы между спецификациями атрибутов и элементами со специальными правилами, такими как textarea. Но адрес, который, как представляется, является главной задачей:

Пробелы между тегами обычно создают анонимные текстовые узлы. Пробелы внутри листовых элементов (элементы, не содержащие других элементов) составляют часть текстового содержимого элемента.

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

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

Однако пробелы, состоящие из разрыва строки, игнорируются, по спецификациям и обычно в практике браузера,, когда он сразу следует за стартовым тегом или предшествует концевому тегу. Так

<div>
<button>one</button>
<button>two</button>
</div>

будет обрабатываться так, как если бы разрывов строк не было. Но когда используются пробелы, как в

<div>
  <button>one</button>
  <button>two</button>
</div>

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

Обновление: В качестве комментария ниже и ответа Alohcis, этот старый (HTML 4.01) принцип в основном не реализован в браузерах и в основном удален в HTML5. Поэтому в большинстве случаев разрыв строки между элементами создает текст node, содержащий символ разрыва строки, который рассматривается как эквивалент пространства.

Ответ 3

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

Это не просто ведущий/конечный - серийные пробелы внутри элемента отображаются как одиночные пробелы. Они будут отображаться одинаково:

<div>   a   b   </div>
<div> a b </div>
<div>a b</div>