Блочная модель документа / display: inline-block [18/23] - интересный и непонятный эффект с padding и блоками с vertical-align.

Почему, если задать “padding-top: 5px;” какому нибудь из блоков, то вместо него будет margin?

Я написала вот так, чтобы посмотреть что будет:
.column-2 {
height: 56px;
padding-top: 5px;
}

И вот что стало с блоками:
image

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

Да, он уменьшается, но почему блок не выравнивается по верху?
Попробуйте убрать vertical-align и посмотрите что будет.

image

image

Потому что по умолчанию блочно-строчные элементы выравниваются по baseline. Присмотритесь - они все выстроились по линии, которая проходит по низу букв! Именно по этой причине для сеткообразующих блоков, в которых может быть разное количество текста, и задаётся изначально vertical-align: top;, чтобы не произошло выравнивание по baseline в случае неравномерного заполнения текстом и не сломалась сетка.