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 по умолчанию? Чем можно объяснить такое "необычное" поведение этих свойств?
<html>
не 400px ? Он ровно 400px. А так как<body>
по умолчанию равен 100%, то он тоже принимает такой же размер.