Для ссылок не меняется margin-top

Question

.con {
  height: 1500px;
  width: 1480px;
  margin: 100px 20px;
  border: 10px;
  border-radius: 10px;
  box-shadow: 0 0 20px 5px #FF5733;
  overflow: auto;
}

.film {
  display: inline-block;
  margin: 80px 70px;
}

.iM {
  margin-top: -80px;
}

<div class="con">
  <div class="film">
    <a class="iM" href="">In her eyes</a>
    <img src="assets/images/2.jpg" onclick="open()" class="im2">
  </div>
</div>

Answer 1

Вопрос: Почему для ссылок не применяется свойство margin-top?

Ответ: Свойство margin может не работать в некоторых случаях. Например, в вашем случае оно не работает потому, что ссылка является строчным элементом.

Решение: Ссылку сделать блочным элементом. Для этого в CSS для ссылки указать свойство: display: block; или display: flex;. Пример:

.con {
  height: 1500px;
  width: 1480px;
  margin: 100px 20px;
  border: 10px;
  border-radius: 10px;
  box-shadow: 0 0 20px 5px #FF5733;
  overflow: auto;
}

.film {
  margin: 80px 70px;
}

.iM {
  display: block;
  margin-top: -80px;
}

<div class="con">
  <div class="film">
    <a class="iM" href="">In her eyes</a>
    <img src="assets/images/2.jpg" onclick="open()" class="im2">
  </div>
</div>

БЛОГ НА HUSL

Для ссылок не меняется margin-top

Ответы (1 шт):