Почему вся область просмотра заполняется красным, если размер элемента невелик? ⇐ Html

[Anonymous]

Привет! просто пытаюсь понять, что здесь происходит.
Я пытаюсь комплексно понять, как все это работает (я опытный человек, но всегда с некоторыми сомнениями относительно того, что происходит за кулисами).
В качестве первого шага я решил попрактиковаться в «разметке» с помощью простого HTML и CSS, но как только я попытался провести несколько экспериментов, чтобы получить обратную связь, я узнаю, действительно ли я понимаю, как размеры элемента работают в CSS (высота и вес). Properties), у меня такое запутанное поведение.
HTML (всего 3 элемента, вложенных в элемент )

Код: Выделить всё

Why does this fills the entire page with red color?



header
main
footer

CSS (просто добавляет красный цвет в качестве фона к элементу

Код: Выделить всё

.page {
background-color: red;
}

Как вы можете видеть, вся область просмотра заполняется красным цветом

Когда тело (элемент .page) не занимает даже половины размера всей страницы


Итак, почему браузер ведет себя таким образом?
Кроме того, я считаю, что интерфейс слишком сложен из-за таких неожиданных вещей (по крайней мере для меня).
Браузер
Google Chrome - 142.0.7444.176 - x64
в режиме инкогнито (во избежание взаимодействия с расширениями браузера).

Подробнее здесь: https://stackoverflow.com/questions/798 ... -big-in-si