Warum wird das gesamte Ansichtsfenster rot ausgefüllt, wenn das Element nicht so groß ist? ⇐ CSS

[Anonymous]

Hallo! Ich versuche nur herauszufinden, was hier vor sich geht.
Ich versuche auf umfassende Weise zu verstehen, wie das alles funktioniert (ich bin ein erfahrener Experte, habe aber immer ein paar Zweifel an den Dingen, die sich hinter den Kulissen abspielen).
Als ersten Schritt habe ich beschlossen, etwas „Layout“ mit einfachem HTML und CSS zu üben, aber sobald ich versucht habe, ein paar Experimente durchzuführen, um Feedback zu bekommen, um zu wissen, ob ich wirklich verstehe, wie die Elementabmessungen in CSS funktionieren (Höhe und Gewicht). Eigenschaften), habe ich dieses verwirrende Verhalten erhalten.
HTML (Nur 3 Elemente verschachtelt im -Element)

Code: Select all

Why does this fills the entire page with red color?



header
main
footer

CSS (Fügt einfach die Farbe Rot als Hintergrund zum -Element hinzu

Code: Select all

.page {
background-color: red;
}

Wie Sie sehen können, wird das gesamte Ansichtsfenster rot ausgefüllt

Wenn der Textkörper (.page-Element) nicht einmal die halbe Größe der gesamten Seite hat


Warum verhält sich der Browser so?
Außerdem finde ich das Front-End aufgrund unerwarteter Dinge wie dieser zu kompliziert (zumindest für mich).
Browser
Google Chrome - 142.0.7444.176 – x64
im Inkognito-Modus (um Interaktionen mit Browsererweiterungen zu vermeiden).