Пробел вокруг тега <label>в начальной загрузке формы и группы форм

Question

При взгляде на начальный загрузчик Встроенная форма документов, вы можете видеть пробел между меткой и ее входом (отмечен желтым цветом ниже):

---

При проверке в инструментах Chrome Dev я не вижу полей / отступов / и т. Д.

---

Более того, мы создали этот простой проект StackBlitz из копии, вставленной в пример кода начальной загрузки, но пробелов вообще нет!

( ПРИМЕЧАНИЕ: В моем DEMO StackBlitz немного растяните дисплей вправо, чтобы применить встроенный стиль.)

---

У меня на самом деле два вопроса:

1. Откуда взято это пустое место на странице документации по загрузке?
2. Как мне увидеть стиль, который применяет этот пробел при проверке в инструментах Chrome Dev?

Заранее большое спасибо.

Answer 1

В большинстве браузеров разрыв строки в коде soruce отображается как пробел для встроенных элементов.Как упоминалось ранее, вы можете установить размер шрифта равным 0, чтобы предотвратить это.

Проверка исходного кода страницы примера начальной загрузки фактически выявляет не только разрыв строки, но даже пробел для определенных элементов.,Это приложение Angular-App, которое вы опубликовали, вероятно, удаляет все разрывы строк и пробелы перед отображением исходного кода.

Answer 2

Встроенные блоки обрабатываются как текстовые элементы, поэтому окружающие пробелы и новые строки считаются пробелами.

<div class="inline-block">A</div>
<div class="inline-block">B</div>

Новая строка между div A и div B выводится как пробел. Ниже приведены методы подавления пробелов на основе html

.

<div class="inline-block">A</div><!-- comment suppresses white space
--><div class="inline-block">B</div>

<div class="inline-block">A</div><div class="inline-block">B</div>  <!--everything on same line without spaces-->

Answer 3

В элементе

inline и inline block есть пробелы / пробелы вокруг них.

Один из способов обойти это - установить размер шрифта родительского элемента на font-size: 0;, а затем указать желаемый размер шрифта для детей.

Надеюсь, это объясняет.