Css: margin-top вызывает прокрутку

Элемент h1 вызывает появление полосы прокрутки. Может ли кто-нибудь объяснить мне, почему?

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}

<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>

Ответ 1

Это потому, что

h1 по умолчанию имеет значение по умолчанию, обычно 0.67em.
Верхняя граница h1 сворачивается
height никогда не включает высоту области поля.

Так как верхний край h1 сжимается, он ведет себя как маржа, принадлежащая header, а не h1. Поскольку высота содержимого h1 равна 10%, его общая высота будет calc(10% + 0.67em).

Вот почему происходит переполнение.

Если вы удаляете верхний край, но оставляете нижний, проблем нет, потому что нижний не сбрасывается из-за не auto height. Из Свертывание полей,

Два поля смежны, если [...] оба относятся к вертикально смежным края коробки, [... например.]

верхний край поля и верхний край его первого в потоке ребенка

нижний край последнего дочернего и нижнего потока margin его родителя, если родитель имеет auto вычисленную высоту.

Итак, вы можете сделать любое из следующих

Удалите верхний край h1
Предотвращение краха поля
Предложите a box-sizing: margin-box рабочей группе CSS. Вероятно, он будет отклонен.

Ответ 2

Поскольку h1 поставляется с пометкой, применяемой таблицей стилей по умолчанию.

Когда вы добавляете этот запас (часто margin-top: .67em и margin-bottom: .67em) в height: 100% в свой код, это превышает высоту видового экрана, запуская вертикальную полосу прокрутки.

Дайте h1 a margin: 0.

Если вы используете box-sizing: content-box или border-box, пространство маркеров всегда будет добавлено в ваше объявление height.

Если вы хотите добавить пространство вокруг своего h1 без добавления высоты, используйте дополнение вместо поля, а также box-sizing: border-box. Вот некоторые варианты реализации: https://css-tricks.com/box-sizing/

Ответ 3

h1 по умолчанию применяется маржа.

Ответ 4

*
{
  margin:0px auto;
}
html, body {
  margin: 0 ;
  padding: 0;
  height: 100%;
}
header {
  height:10%;
}
section {
  height:90%;
}

<header>
  <h1>
    Hello
  </h1>
</header>
<section>

  test
</section>

Ответ 5

Тег

h1 в элементе уровня блока имеет некоторый запас.

Чтобы удалить такой тип дополнительного поля и отступов, рекомендуется reset маркер всех элементов и отступы до 0.

Это можно сделать:

 * {
     margin: 0;
     padding: 0;
 }

* {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
header {
  height:10%;
}
section {

<header>
  <h1>
    Hello
  </h1>
</header>
<section>
  test
</section>