Почему появляется небольшая полоса прокрутки?

Question

[beduin01]

Не могу понять почему в браузере появляется небольшая полоска прокрутки на следующем коде:
https://jsfiddle.net/08pf5upo/

img.ctrlv.in/img/16/07/19/578e0e860941b.png

Answer 1

[blolg]

Потому что не сброшены стили браузера. Нужно использовать reset или normalize.

Comments

[beduin01]

А в каком месте это создает проблему?

[blolg]

beduin01: У body есть отступ. Плюс для .global надо добавить box-sizing: border-box.
https://jsfiddle.net/08pf5upo/4/

Answer 2

[ArturArturov]

joxi.ru/DmBNEVXuNakw3m

Answer 3

[Никита Кравченко]

Все дело в том, что ты берешь за высоту 100vh(высота активного окна браузера). И это правильно, поскольку тебе нужно full screen. Но ты не учитываешь что padding тоже изменяет размер блока, поэтому у тебя в высоту блок 100vh+all padding(20px)
Используй box-sizing: border-box, она позволяет включать в width и height размеры padding:

.global {
  box-sizing: border-box;
}

Comments

[beduin01]

Спасибо, а почему в коде в котором вообще padding нет происходит тоже самое. Вот:
.global
{
border: dashed 1px;
height: 100vh;
}

паддинга никакого, а полоса прокрутки небольшая появляется

[beduin01]

Вот код: https://jsfiddle.net/sk3zw1gL/

[beduin01]

Никита Кравченко просто я не понимаю почему для удаления полос прокрутки нужно задавать параметры для того же body. Ведь по умолчанию body это всего лишь контейнер у которого все должно быть по нулям или нет?

[Никита Кравченко]

beduin01: дефолтно у body стоят отступы. Поэтому перед версткой следует задать * {padding: 0;margin: 0;}
По поводу border:
border тоже увеличивает размер блока
В твоем случае если брать border: 1px, то блок увеличится со всех сторон по 1px. Чтобы это не происходило, нужно написать box-sizing: border-box;