Когда рендеринг полей на пустых встроенных элементах, в соответствии со спецификациями и в браузерах? Следующий код был протестирован в chrome (webkit).
Этот код не отображает поля:
<p>Example <span style="margin:2em"> </span>Example</p>
И этот код делает:
<p>Example <span style="margin:2em"></span>Example</p>
Я понимаю, что в первом примере белое пространство рушится, но это должно сделать его эквивалентным второму примеру? Итак, почему и когда?
Спектр говорит, что пробел должен быть свернут, даже если встроенный элемент начинается после пробела и начинается с пробела (т.е. открывающий тег появляется в середина пробела, как в вашем первом элементе span):
любое пространство (U + 0020), следующее за другим пространством (U + 0020) - даже пространство перед встроенным, если это пространство также имеет "белое пространство", установленное в "normal", "nowrap" или "pre-line" '- удаляется.
Для вашего первого элемента span это должно привести к пустующему элементу. Пустой встроенный элемент должен по-прежнему генерировать пустое поле, хотя и с нулевой шириной, так как внутри нет ничего, и поля должны по-прежнему вступать в силу, поскольку поле всегда отображается:
Пустые встроенные элементы генерируют пустые встроенные поля, но эти поля по-прежнему имеют поля, отступы, границы и высоту строки и, таким образом, влияют на эти вычисления так же, как элементы с контентом.
Согласно Chrome Web Inspector, похоже, что он не смог сгенерировать поле для элемента span полностью, так как он сбрасывает пространство в элементе в пространство, которое происходит непосредственно перед ним. Когда элемент span пуст в источнике, он генерирует пустой поле с полями правильно. У всех других браузеров нет проблем с созданием пустого окна после того, как они выполнят прокручивание пробелов, а спецификация ничего не говорит об удалении не анонимного поля, если он был пуст процессом свертывания пробелов, поэтому я бы сказал, что это ошибка Chrome.
Как упоминалось в комментариях, эта проблема также влияет на последние версии Chrome, которые используют Blink. Blink - это вилка WebKit, поэтому неудивительно, что большинство ошибок CSS2.1, поражающих WebKit, еще не исправлены в Blink.