Problem z właściwością margin

Witam.
Mam takie szybkie pytanie bo mam problem z wycentrowaniem diva a w zasadzie to nie rozumie zachowania się właściwości margin w tym przypadku. Poniżej prościutki kod przestawiający mój problem

<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      height: 100vh;
    }
    .container {
      width: 25vw;
      height: 40vw;
      margin: 100px auto;
      background-color: #aaa;
    }
  </style>
</head>

<body>
  <div class="container"></div>
</body>

</html>

i moje pytanie brzmi: dlaczego jak dodaje właściwość margin do diva .container to jest on odsuwany o tą wartość ale to samo dzieje się z body?. Dlaczego body nie jest na swoim miejscu "top i left: 0 i height i width: 100% okna" - (oczywiście nie chodzi tu o to że nie zastosowałem absolute itp.)"a margin jest stosowany tylko do diva?

Wyjaśnij proszę, o co Ci chodzi i na czym polega problem. Poniżej możesz zobaczyć, jak się strona zachowuje po zmianie koloru body na niebieski. Nie wiem co oznacza fragment " to samo dzieje się z body" - jakoś nie widzę, żeby BODY się odsuwało. Wyjaśnij proszę (albo najlepiej - pokaz na obrazku, analogicznie do tego, co ja zrobiłem) co konkretnie nie działa.
.
.
.

Pojawia się scroll więc body schodzi razem z divem o tą wartość margin
Zobacz do devtools i zaznacz body.

"It’s correct behavior for margins. The first child’s top margin will ‘escape’ out the top of the parent, effectively pushing the parent down. " - tak mi się wydawało, ale wolałem jeszcze sprawdzić w necie ;)

https://css-tricks.com/forums/topic/why-is-margin-top-causing-the-background-of-a-parent-div-to-move-down/
https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element

Tak się to zachowuje - element rodzic się jakby musi "zahaczyć", jego położenie jest częściowo uzależnione od tego, gdzie się "przyczepi". Ponieważ tutaj pierwszym elementem jest przesunięty div, więc body ucieka/szuka możliwości zahaczenia się, którą znajduje dopiero po dojściu do tego div'a. Cięzko to wytłumaczyć, ale jeśli Cię to interesuje to polecam do googlowania hasło CSS Box Model.

Podane zachowanie można obejść na kilka sposobów (zresztą są one podane w w/w linkach) - chociażby tak, jak sugerujesz w pierwszy poście, przez wypozocjonowanie elementów.

Zauważ, że wystarczy dodać jakikolwiek element wewnątrz body przed <div class="coint..., żeby body mogło się wypozycjonować zgodnie z Twoimi oczekiwaniami (inaczej mówiąc - będzie miało punkt zaczepienia), przez co się już nie opuści razem z przesuniętym DIV'em, a scroll zniknie :)

<body>
*<div class="container"></div>
</body>

Też z tym kiedyś walczyłam i uznałam po prostu za buga, a dziś pokopałam i dowiedziałam się, że to jest celowe i wynika z mechanizmu kolapsowania marginesów:
https://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://jonathan-harrell.com/whats-the-deal-with-margin-collapse/
co nie znaczy, że jest to mądre, czemu daję wyraz w swoim marudnym wątku:
HTML i BODY robią se jaja