Почему текст не реагирует на margin-bottom, margin-top и padding-bottom, padding-top?

Question

[MaKsCrIzIs]

в коде html создана коробка

<div class="contacts">
        <h1><a class="contacti" name="contacts-1">Контакти</a></h1>
    </div>

в css

.contacts {
    background: #191919;
    display: flex;
    justify-content: center;
    margin-top: 1000px;
    padding: 60px;
}

вот всё работает если я напишу margin-right или left отступ будет но как только пишу margin-bottom или margin-top текст не перемещается вниз

Comments

[Ankhena]

Используйте теги <code></code>для вставки кода.
А еще лучше, делайте песочницу с видимой проблемой на codepen.io

[Ankhena]

Читайте
1. Блочная модель https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
2. Схлопывание и выпадение вертикальных margin htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvay...
и т.д.

И, кстати, явно видно, что перемещается: https://codepen.io/AnnaSummer/pen/ExQrxbE
Возможно, не туда и не так, как вам хочется при наличии других элементов. Почему так может быть я написала выше.

Answer 1

[Yulia Khavaeva]

Все margin отлично работают, но вот padding-top, padding-bottom не работают потому что уже применен padding: 60px;