Почему появляется скролл, при уменьшении line-height?

Question

[Kolya112151]

Скачал normalize.css, подключил, появился скролл на несколько пикселей. Файл первый по запросу в гугле https://necolas.github.io/normalize.css/
Увидел, что скролл появляется из-за свойства:

html {
  line-height: 1.15;
}

Вижу, что при добавлении этого свойства уменьшается расстояние, между строками. Почему тогда появляется скролл? Ведь размер контента наоборот уменьшился!

Вот код:

<div class="wrapper">
    <header class="header">Header</header>
    <main class="main">Main</main>
    <footer class="footer">Footer</footer>
</div>

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main {
    flex: 1 1 auto;
}

Comments

[Ankhena]

Скролл не имеет отношения к line-height.
Можете самостоятельно проверить, отменяя это свойство в девтулзах.

Но в показанных вами стилях нет обнуления margin у body.
И именно из-за него появляется скролл: min-height: 100vh; + марджины = скролл.

[Kolya112151]

Ankhena, reset.css добавлял, поэтому всё обнулено да и в первую очередь искал лишние отступы через девтулзы))
В том и дело, что когда удаляю это свойство, скролл пропадает.

[Ankhena]

Kolya112151, пожалуйста, сделайте песочницу с проблемой на codepen.io
В которой будет видно, что при line-height: 1.15; есть скролл, а когда этого свойства нет, то и скролла нет.

[Kolya112151]

Странно конечно, но на codepen.io всё нормально, без скролла. Ладно тогда, когда-нибудь разберусь, спасибо.

[Ankhena]

Kolya112151, это как раз не странно, а очень даже нормально.
Потому что прокрутка появляется не из-за line-height.

Answer 1

[Famouse]

Столкнулся с аналогичной проблемой. При отключении line-height скролл то исчезал, то появлялся.

Решением проблемы стал поэлементный анализ страницы, то есть в dev tools проходитесь по каждому вложенному элементу и удаляете его (объекты, которые по вашей задумке должны быть на границе экрана и им сопутствующие трогать не надо, только вложенные), до тех пор пока скролл не пропадет.

В моем случае стили писались не с нуля, а с использованием PrimeNg и проблема была с header content footer, где в футере были кнопки, которые делали отступ вниз и из-за этого был скролл.