Как работают width/height в html и body?

Question

Width

Мне непонятно почему если задать width: 400px для html, то 400рх будет body, а не html. Вот пример:

* {
  padding: 0;
  margin: 0;
}

html {
  background: orange;
  height: 50%;
  width: 400px;
}

body {
  background: yellow;
}

p {
  font-size: 2em;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
</div>

Фон html – orange, body – yellow. Тут видно, что вне зависимости от заданной ширины html все равно растягивается на ширину всей страницы. То есть html получается невозможно задать ширину?

Height

По умолчанию height у html и body auto. И для того, чтобы задать высоту body в процентах, например, надо задать конкретное значение для родителя body, то есть для html. Это все понятно. Но вот пример.

* {
  padding: 0;
  margin: 0;
}

html {
  background: orange;
  height: 50%;
  width: 500px;
}

body {
  background: yellow;
}

p {
  font-size: 2em;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
</div>

Здесь можно увидеть, что для html задана высота в 50%. Однако, несмотря на это условие, html не отображается на половину высоты страницы, а вместо этого продолжает отображаться на всю высоту экрана. И выходит, что для html также невозможно установить и высоту. В любом случае будет отображение на всю высоту/ширину экрана.

Вопрос такой: какие значения высоты и ширины у body и html по умолчанию? Чем можно объяснить такое "необычное" поведение этих свойств?

Answer 1

Для изучения и отладки привыкайте использовать полупрозрачность для изображений и фоновых цветов, а также замените border на box-shadow, где это возможно. Вы даже не представляете, насколько это облегчит работу и сэкономит время.

По вопросу...

Width

Если обозначить/подсветить границы элементов <html> и <body>, а заливку не делать сплошной и непрозрачной, то можно наблюдать такую картину:

* {
  padding: 0;
  margin: 0;
}

html {
  height: 50%;
  width: 400px;
  background-color: #ffa50088;
  box-shadow: inset 0 0 0 5px green;
}

body {
  width: 300px;
  background: #ffff0088;
  box-shadow: inset 0 0 0 3px red;
}

p {
  font-size: 1em;
  box-shadow: inset 0 0 0 1px blue;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
</div>

Как видите, все указанные размеры применились правильно.

Height

Здесь та же ошибка - "если я не вижу, то этого и нет". А нет, потому что не хотите видеть. Или не знаете как и куда смотреть. В первую очередь, смотреть нужно в DevTools и инспектор стилей. Тогда можно заметить, что и тут всё сработало:

* {
  padding: 0;
  margin: 0;
}

html {
  height: 50%;
  width: 500px;
  background-color: #ffa50088;
  box-shadow: inset 0 0 0 5px green;
}

body {
  background: yellow;
  background: #ffff0088;
  box-shadow: inset 0 0 0 3px red;
}

p {
  font-size: 2em;
  box-shadow: inset 0 0 0 1px blue;
}

<div class="content">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut officiis explicabo similique tempore tenetur ullam iusto eos? Rem molestias minima neque ipsum saepe laudantium animi, ut, est, vitae aut unde.</p>
</div>

Видно, что html (обозначен зелёной рамкой) вполне себе 50% от окна просмотра.

^{Если захотите что-то уточнить, то напишите в комментарии под этим ответом.}

БЛОГ НА HUSL

Как работают width/height в html и body?

Ответы (1 шт):

Width

Height