Почему, если задать “padding-top: 5px;” какому нибудь из блоков, то вместо него будет margin?
Я написала вот так, чтобы посмотреть что будет:
.column-2 {
height: 56px;
padding-top: 5px;
}
И вот что стало с блоками:
Почему, если задать “padding-top: 5px;” какому нибудь из блоков, то вместо него будет margin?
Я написала вот так, чтобы посмотреть что будет:
.column-2 {
height: 56px;
padding-top: 5px;
}
И вот что стало с блоками:
Да, он уменьшается, но почему блок не выравнивается по верху?
Попробуйте убрать vertical-align и посмотрите что будет.
Потому что по умолчанию блочно-строчные элементы выравниваются по baseline. Присмотритесь - они все выстроились по линии, которая проходит по низу букв! Именно по этой причине для сеткообразующих блоков, в которых может быть разное количество текста, и задаётся изначально vertical-align: top;, чтобы не произошло выравнивание по baseline в случае неравномерного заполнения текстом и не сломалась сетка.