Помогите понять ширину в 16/23

Здравствуйте! Разобрался почти во всем задании (выполнил на 100%). Вот код
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 520px;
min-height: 270px;
padding: 20px;
font-size: 14px;
line-height: 1.5;
font-family: Arial, sans-serif;
color: white;
background-color: #3a78a1;
background-image: url("/assets/course9/grid.png");
background-repeat: repeat;
background-position: -80px -80px;
}

input[type=“text”] {
height: 38px;
font-size: 18px;
font-family: Arial, sans-serif;
border: 2px solid #cccccc;
border-radius: 5px;
padding: 0 10px;
box-sizing: border-box;
}

.block {
background: rgba(0, 255, 255, 0.2);
}

.block1 {
border: 2px solid white;

}
.block2 {
margin: 18px;
padding: 20px;
}
/* Cтили, которые можно изменять */
Вопрос: почему для блоков не задана ширина, ведь она прописана только в body (520px), а свойство width - не наследуется?

Вообще откуда мы знаем размер внутреннего (2-ого дива), если мы задали только input style=“width: 100%;”?

блочные элементы по умолчанию растягиваются на всю ширину родителя
в пикселях это выглядит так: на блок1 (с маргинами-паддингами-бодером) приходится 520рх (вся width body). маргинов и паддингов у блок1 нет, есть только бордер, поэтому width будет 520-22=516px
блок2, в свою очередь тоже будет растягиваться на ширину родителя: т.е. на блок2 (с маргинами-паддингами-бордерами) будет 516рх. Бордеров у него нет, есть паддинги и маргины, поэтому на width остается 516-18
2-20*2=440рх

Спасибо огромное, все понятно ))

Т.е. мы рассчитываем что для блока-1 и блока-2 что width: auto, тогда получается что ширина складывается из маргинов бордера паддингов и ширины содержания. Просто смущает, что в коде мы для инпута ставили width: 100%.

<input type="text" style="width: 100%;" value="Значение поля">

просто инпут - не блочный элемент и по умолчанию растягиваться не будет

Т.е. мы как-бы ставили width: auto для блока-1 и блока-2 (не указывали у них ширину вообще, т.е. принималось значение по умолчанию), width: 100% у инпута - это мы просто его растянули, потому что он не блочный элемент?

да, именно. теперь, если мы просто увеличим ширину у боди - инпут тоже увеличится, а если уменьшим у боди - то и инпут ужмется

Такой вопрос. Почему инпут воспринимает свойство width: 100%, если он строчный? Или инпут это исключение?

да, считайте его исключением

такой вопрос… Зачем в этом задании 3 класса (.block .block1 и .block2)?
вернее мне ясно зачем бл1 и бл2, но какая цель у “папы-блока”?Сбило меня с пути капитально и надолго…

ЗЫ >>>автору поста: про высоту и ширину, хороший вопрос, я решение начал именно с этого ракурса, о чем пожалел очень сильно, т.к. выстраивается крайне сложное решение относительно того, насколько быстро и просто его можно было выполнить .