Только что:

<html>
<head></head> //there is content in here
</html>

Само по себе показывает, что html имеет высоту 8px (согласно Chrome). Почему это?


enter image description here

enter image description here

0
tonitone120 14 Сен 2020 в 22:34

3 ответа

Лучший ответ

В большинстве браузеров, включая Chrome, элемент body по умолчанию имеет значение margin:8px. Это то, что вы видите.

Это всего 8 пикселей, а не 16 пикселей (8 пикселей сверху + 8 пикселей снизу, сложенные вместе) из-за сворачивания полей . Нет содержимого, поэтому верхнее и нижнее поля «сворачиваются» вместе.

Элемент body добавляется автоматически, даже если вы не помещали его в свой HTML, если вы проверите его в Chrome, вы увидите его, а также там, где таблица стилей пользовательского агента добавляет 8px :

Chrome inspector

Если вы посмотрите этот фрагмент, высота будет равна 0:

body { margin:0;}
<html>
  <head>
  </head>
</html>

Или просмотрите этот фрагмент, и высота будет 20 пикселей;

body { margin: 20px 0 0 0;}
<html>
  <head>
  </head>
</html>
3
user1601324 14 Сен 2020 в 19:54

Это потому, что в таблице стилей автора приложения для элемента <body> есть поля 8 пикселей (или аналогичные). Таким образом, значение по умолчанию для элемента <body> (который является обязательным элементом и, следовательно, будет автоматически добавлен браузером) будет выглядеть следующим образом:

<html>
  <head>
    <title></title>
  </head>
  <body style="margin: 1ex;">
  </body>
</html>

PS: стиль по умолчанию margin: 1ex; можно также добавить к самому элементу <html>. Это зависит от предпочтений производителя браузера.

1
AxD 14 Сен 2020 в 19:37

Я не уверен, но я думаю, что Chrome может просто назначить значение по умолчанию, потому что когда-то я делал что-то со строками, где мне нужно было поместить плавающее-левое, а я этого не делал в chrome, а в mozilla будет выглядеть иначе

0
EustakiosPower 14 Сен 2020 в 19:37