<HTML> и <BODY>: Почему нет новых строк?

Итак, я читал, что <html> и <body> являются элементами уровня блока, как и <div> и <p>.

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

Например aaa<div>b</div>ccc выглядит следующим образом:

aaa
b
ccc

Итак, почему бы не <html> и <body> добавить две строки в начало страницы html?

Ответ 1

Элементы уровня блока не "запускают новые строки"... они просто расширяются до обеими сторонами на неопределенный срок, пока не попадет элемент контейнера или стороны дисплея (width:100%)... из-за этого они имеют эффект "подталкивания" любого другого контента ниже их или падение ниже любого встроенного контента, который непосредственно предшествует им. Это также означает, что элементы уровня блока будут только "нажимать" элементы уровня брата.

Элементы

<html> и <body> не имеют братьев и сестер, а только детей, поэтому им не нужно ничего менять.

Здесь представлено графическое представление о том, что происходит:

Учитывая эту разметку:

<html>
<head></head>
<body>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div style='width:45%; float:left;'>
    <div>&nbsp;</div>
  </div>
  <div style='width:45%; float:left;'>&nbsp;</div>
</div>
</body>
</html>

Ответ 2

Подумайте об этом так:

<div>
    <div>Text</div>
</div>

Существует только одна строка текста:

Текст

Это так же, как в случае, если у вас есть текст в теле:

<html>
    <body>Text</body>
</html>

Когда текст находится в дочернем элементе, новые строки не вводятся.

Ответ 3

Это элементы блока, которые определяют страницу. Браузеры контролируют, как они хотят его просматривать. Вы можете найти какой-то ужасный браузер, который отображает <body>, добавив новую строку (это возможно). Однако основное внимание уделяется тегам <body> и <html> в качестве тегов, отображающих все на экране. Я также хотел бы добавить, что вы можете использовать тег, чтобы полностью соответствовать экрану браузера, используя

body {padding:0;margin:0;}

Надеюсь, что это поможет.

Ответ 4

Элементы уровня блока по умолчанию (т.е. когда CSS не используется для его изменения) подразумевают разрывы строк до и после. Они не подразумевают пустые строки.

Итак, когда у вас есть <div>foo</div>, тогда в начале новой строки появляется "foo", а также строка и т.д. любой текст после того, как он находится на следующей строке. Но это не означает создание пустых строк. Если у вас есть <div>foo</div><div>bar</div>, тогда строки "foo" и "bar" появляются в последовательных строках, без пустой строки между ними.

Элемент html как таковой не создает видимого содержимого; отображается только элемент body внутри него. И контент body начинается с начала страницы, которая начинается с новой строки. Существует ли тег <body> или нет, не имеет значения; всегда есть элемент body, который начинается в первой строке.