Помогите с 8/23. Испытание 1

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

Сначала прикинул размеры исходя из того, что маленький квадрат 2020, а большой 100100. Указал размеры для всех трех блоков. Потом когда начал писать padding’s and margin’s размеры блоков увеличились и я урезал ширину и высоту блоков, но все равно не помогло, есть различия везде даже в первом блоке, который состоит только и ширины и высоты. Что делать я не знаю, я в тупике?

.block1{
width: 200px;
height: 40px;
}

.block2{
width: 100px;
height: 20px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 120px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

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

2

а ширину рамок у блоков вы учесть не забыли? её тоже надо вычитать из размеров, когда ширину-высоту задаете.

3

Исправил ширину и высоту блоков так как учел рамки. Два вопроса

  1. Почему-то текст не совпадает во втором блоке (т.е. Блок 2 не накладывается на блок 2)
  2. С третьим блоком вообще беда он вообще не совпадает.
    Задание выполнено на 91%, но я хочу разобраться что не так, так как считаю что для понимания блочной модели это важное задание
    .block1{
    width: 196px;
    height: 36px;
    }

.block2{
width: 96px;
height: 16px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 120px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
}

.block3{
width: 176px;
height: 16px;
margin-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
border: 12px solid white;
}

4

Положение текста в блоке зависит от внутренних отступов. То есть отступами слева и сверху вы подгоняете текст в блоке под образец, а затем поправляете высоту, если не сходится.
Это самый простой способ пройти задание. Потом вы можете подправить ширину и отступы снизу и справа, чтобы сделать их симметричными.

5

значит, неправильно подогнали размеры
вот, навскидку: на образце блок с учетом рамки занимает по высоте 3 клетки, т.е. 60 рх, а у вас 16+20(верхний паддинг)+20(нижний паддинг)+2*12(рамка сверху и снизу)=80px - конечно, совпадать не будет

6

Спасибо, огромное.