Когда я пытаюсь сдвинуть изображение вверх с помощью отрицательного поля, весь контейнер перемещается вверх

Итак, вот код html:

<div class="bottom_block">
   <a class="logo" href="#">
    <img src="img/logo_uniqa.jpg" height="90px" width="100px" alt="logo">
   </a>
</div>

И вот css:

.bottom_block {
    background-color:  blue;
    height: 50px;
    width: 100%;

}
.logo {
    display:block;
    padding-bottom: 10px;

}
.logo img {
    display: block;
    margin:0 auto;
}

Итак, я использовал margin-top: -10px, но он перемещает весь контейнер, а не только изображение.

Ответ 1

Это происходит из-за правила margin-collapsing. Чтобы исправить это, вы можете просто использовать прозрачную рамку для элемента:

.logo img {
   border: 1px solid transparent;
   margin-top: -10px;
   display: block;
}

Что такое крах?

Я уже связан с страницей документации MDN для того, какая разница. Вот быстрый взгляд:

Теперь, почему добавление границы отменяет правило сбрасывания маржи?

Это не единственный способ предотвратить крах-крах; есть и другие способы, такие как добавление прокладки к элементу.

Почему это предотвращает срыв маржи? Потому что он (элемент) отделен от макета окна. Я хочу сказать, что заполнение или граница не разделяют элемент физически друг от друга, но маржа физически разделяет.

Хорошо, давайте обсудим, как методы ограничения границ, заполнения или переполнения предотвращают разваливающийся запас. Чтобы прояснить ситуацию, я сделал эту картину магнитов. Вы можете знать правило противоположных полюсных магнитов, если один из них сдвинут, другой будет также перемещаться, а не сшивать друг с другом.

Посмотрите на фотографии, чтобы узнать, как предотвратить крах поля:

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