Html основы - элементы управления, записанные в одной строке против разных строк - PullRequest
Новая
       27

Html основы - элементы управления, записанные в одной строке против разных строк

0 голосов
/ 01 апреля 2020

Почему эти два блока кода отображаются по-разному? 

<button>text1</button>
<button>text2</button>

против

<button>text1</button><button>text2</button>

Отредактировано для уточнения:

Мы можем видеть в эту скрипку :

  • запись элементов управления в разных строках добавляет пробел между ними (это пространство не может быть достигнуто при проверке консоли, но может ясно видно)
  • запись элементов управления в одной строке невозможна.

Ответы [ 3 ]

0 голосов
/ 01 апреля 2020

Это потому, что браузер не имеет понятия разрывов строк или вкладок вне особых ситуаций, таких как тег <pre>, поэтому, где бы он их ни находил, он конвертирует их в пробелы. Имейте в виду, что он будет игнорировать все пробелы, разрывы строк и табуляции, кроме первого. У вас может быть 30 последовательных разрывов строк и 100 пробелов в вашем коде, но он будет отображаться как 1 пробел в браузере.

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

Пример: код с переводом строки, но без пробела: 

    <button>text1</button>
<button>text2</button>

Из-за переноса строки между ними будет отображаться 1 пробельный символ. Вы можете проверить это в скрипте.

Обычно любой вид форматирования, подобный этому, обрабатывается CSS.

Объяснение MDN примерно так же хорошо, как и любое другое. Фактический spe c.

0 голосов
/ 01 апреля 2020

Раньше я запоминал это, и я не мог сразу найти детали в HTML spe c, но я знаю, что я нахожусь в поле с этим ответом.

<button> - это встроенный элемент (inline-block). Таким образом, две кнопки будут рассматриваться как два встроенных слова. Поэтому, как и слова, между ними будет пробел. Но когда у вас нет пробела в «тексте», они больше не рассматриваются как встроенные слова и, следовательно, между ними нет пробела.

Если смогу, я найду точный spe c позже.

0 голосов
/ 01 апреля 2020

"EOL" в HTML вы должны сказать это, попробуйте поставить <br> между кнопками. 

<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <h1>Case 1</h1>
    <button>text1</button>
    <br>
    <button>text2</button>


    <h1>Case 2</h1>
    <button>text1</button>
    <br>
    <button>text2</button>

  </body>
</html>
...