Почему кликабельная область моей ссылки кажется удаленной от реального содержимого элемента?

Question

Я создал необычную проблему, которую я не знаю, как решить, или даже Google.

У меня есть всплывающее окно на веб-сайте, над которым я работаю, и кнопка "Закрыть" не работает. Я имею в виду, что это работает, но область попадания не в своем уме ... и место тоже. Вы должны нажать немного над значком «закрыть», чтобы закрыть всплывающее окно. Я использую HTML, CSS и jQuery для анимации.

.map-popup {
    min-height: 100px;
    min-width: 200px;
    position: absolute;
    direction: ltr;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    padding: 16px;
    font-size: 13px;
    font-weight: normal;
    color: 333132;
    -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
    bottom: 1%;
    left: 12%;
    opacity: 0;
}

.map-close {
    cursor: pointer;
    float: right;
    display: block;
}

<div class="map-popup" id="map-popup-1">
    <div class="map-title">Jeansy <span class="map-stitle">(Indie)</span></div>
    <a class="map-close"><img src="map/img/xicon.png"></a><br> Produkcja <span class="map-right">24zł</span><br> Transport <span class="map-right">6zł</span><br> Cło <span class="map-right">4zł</span><br> Marża producenta <span class="map-right">5zł</span><br>    Marża sklepu <span class="map-right">54zł</span><br> Podatki <span class="map-right">27zł</span><br>
    <div class="map-btitle">Cena końcowa<span class="map-right">120zł</span></div>
    <a class="map-cta" href="#">Sprawdź</a>
</div>

ссылка на прототип сайта

Answer 1

Не самое элегантное исправление, но просто присвойте изображениям «х» свой собственный класс и примените отступы сверху.У меня сработало что-то вроде следующего:

<img src="map/img/xicon.png" class="close-icon">

со следующим css:

img.close-icon {
  padding-top: 30px;
}