По какой причине в данном случае появляется переполнение контента?

Question

[Muranx]

Здравствуйте!

<div class="wrapper">
	<div class="overflowed">
		Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Ab delectus optio libero dicta odit quidem pariatur tempora hic amet earum repudiandae esse voluptates consequuntur nesciunt aliquam, vero doloremque et vitae.
	</div>	
</div>

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: impact;
}
body{
	width: 100vw;
	height: 100vh;
	background-image: linear-gradient(45deg, black, #454545);
}
.wrapper{
	max-width: 1280px;
	margin: 25px auto;
}
.overflowed{
	color: #fff;
}

когда у элемента <div class="wrapper"> убираешь отступы (margin) сверху и снизу то прокрутка пропадает.
Почему так получается, что прокрутка по оси Х и Y появляется от маржинов сверху и снизу?

Comments

[Ankhena]

Поддерживаю всё, что сказал Сергей в ответе.
И плюс дополнительный вопрос: зачем вам нужно указывать ширину body. Если с ней ничего не делать, то и так всё будет хорошо. Нужно только обнулить margin у body

Answer 1

[Сергей delphinpro]

потому что 100vw != 100%

100vw - это ширина окна вместе с полосой прокрутки
100% - это ширина окна без учета полосы прокрутки

Как только появляется вертикальный скролл 100vw у body становится больше 100% контентной части

Поменяйте у body ширину на 100%

Comments

[Сергей delphinpro]

ах, да, надо наверное еще пояснить почему в принципе появляется скролл? =))
Есть такая штука - называется схлопывание внешних отступов (margin collapsing)

...Хотел сам описать, но пожалуй вот здесь все доступно описано
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_...

В данном случае отступ у wrapper объединяется с отступом (нулевым) у body и body съезжает вниз на такую же величину. А так как он высотой в 100vh то появляется скролл.

[Сергей delphinpro]

Решение:
1. Сделать не марджин в wrapper а такой же паддинг у body
2. Или задать body 1px прозрачную рамку

[Muranx]

Сергей delphinpro, про колапсинг прочитал , в целом ничего сложного для понимания, но хоть убей не понимаю, почему , когда задаю wrapper - margin-top: 20px; появляется скролл по горизонтали ну вертикальный скролл понятен, типа враппер отталкивается не от бади а на самом деле от условного родительского блока для боди, и то что избежать это можно тремя способами (текст внутри бади, бордер у бади или паддинг) НО я внатуре не врубаюсь , почему появляется горизонтальный то скролл, если я задаю чисто верхний маржин ! Оо

[Сергей delphinpro]

Muranx, а про горизонтальный я в ответе написал.
смотрите на конкретном примере

допустим окно развернуто на весь монитор и имеет ширину 1920 пикселей
кода вы задаете body { width: 100vw; } - ширина body будет 1920 пикселей
Когда появляется вертикальный скроллбар, который допустим шириной 20 пикселей, то ширина боди по прежнему остается 1920 пикслей, но доступного пространства в окне на 20 пикселей меньше, чем 1920, отсюда и скролл.
Так работает единица vw