1

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 по умолчанию? Чем можно объяснить такое "необычное" поведение этих свойств?

3
  • Вы с фонами разобрались - ru.stackoverflow.com/a/1208045/265406 ?
    – UModeL
    22 ноя 2020 в 16:56
  • @UModeL фоны пока оставила, потому что поняла что в вообще не понимаю как работают тэги body и html:) мне сначала с этим разобраться надо
    – Eva
    22 ноя 2020 в 17:00
  • Если бы Вы покопались в том примере, то понимание возможно бы приблизилось. Этот вопрос тесно связан с предыдущим. Почему Вы думаете, что <html> не 400px ? Он ровно 400px. А так как <body> по умолчанию равен 100%, то он тоже принимает такой же размер.
    – UModeL
    22 ноя 2020 в 17:07

1 ответ 1

2

Для изучения и отладки привыкайте использовать полупрозрачность для изображений и фоновых цветов, а также замените 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% от окна просмотра.

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

3
  • 1
    Тут меня скорее сбил с пути фон, который вне зависимости от заданных размеров, расползается на всю область просмотра, ну а так спасибо
    – Eva
    23 ноя 2020 в 15:30
  • @Eva: если надо что-то уточнить, то не стесняйтесь - ваш вопрос очень широкий и нельзя на него ответить парой предложений. Если по этой же теме, то спрашивайте прямо здесь, в комментариях под ответом. Если выйдите за рамки темы, то я посоветую задать новый вопрос.
    – UModeL
    23 ноя 2020 в 18:35
  • 1
    нет, спасибо. Вроде бы пока все понятно, почитала еще по этой же теме статьи в инете
    – Eva
    24 ноя 2020 в 14:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.