«Схлопывание» внешних отступов [9/23]

Подскажите пожалуйста, в данной теме говорится что:
Горизонтальные отступы между элементами просто складываются. Например, горизонтальный отступ между двумя элементами с отступами 30px будет равен 60px.

Задание:
первому блоку задайте нижний отступ размером 20px;
второму блоку задайте верхний отступ размером 40px.

Из информации в предыдущем уроке где говорилось что одна клетка 20px, я понял что должно в данном задании после выполнения между блоками быть отступ 60px, т.е. 3 клетки.
После выполнения данной задачи расстояние между блоками 2 клеточки.
Растолкуйте, пожалуйста, что я неправильно понял.
CSS:
body {
padding: 20px;
}

.block {
height: 96px;
line-height: 96px;
text-align: center;
}

.block-1 {
margin-bottom: 20px;
}

.block-2 {
margin-top: 40px;
}

margin-top и margin-bottom - это вертикальные отступы, для них работает это “схлопывание”. А складываются горизонтальные отступы, то есть margin-left и margin-right.

1 лайк

Ох, чета я в 4 соснах запутался, спасибо за ответ :slight_smile: