Задание 8

Курсы §10. Блочная модель документа
1

Хоспади, подскажите сильно накостылял?
В чём именно я совершил ошибку относительно пройденного этапа? Вижу что лишняя нагромождённость есть, но не могу понять в чём именно.
Мельком глянув решения людей, обратил внимание, что более лаконичный код через 4 последовательных числовых значения.
Вот же каким путем пошёл я…

.block1 {
height: 36px;
width: 196px;
}
.block2 {
width: 96px;
height: 26px;
margin: 20px;
margin-left: 120px;
padding-left: 40px;
padding-top: 10px;
padding-bottom: 20px;

}
.block3 {
height: 11px;
width: 171px;
margin-left: 20px;
border-width: 12px;
padding-top: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

2

Никаких ошибок я не вижу. Расписали padding - если так вам на данном этапе понятнее, пишите как привыкли. Когда выучите расположение отступов по часовой стрелке, будете писать 4 значения в одном свойстве.

3

Я вот так сделал, 100% вышло
/* Базовые стили, изменять не нужно */
html,
body {
margin: 0;
padding: 0;
}

body {
width: 540px;
min-height: 290px;
padding-top: 20px;
padding-left: 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;
}

.block {
background: rgba(0, 255, 255, 0.2);
border: 2px solid white;
}
.block1 {
width: 196px;
height: 36px;
}
.block2 {
width: 96px;
height: 16px;
margin: 20px 120px;
padding: 10px 0 30px 40px;
}
.block3 {
width: 166px;
height: 31px;
margin: 20px 20px;
border: 12px solid;
padding: 5px 5px 0 5px;
}