为什么链接的可点击区域似乎偏离了实际的元素内容？

Question

我创造了一些不寻常的问题，我不知道如何解决，甚至谷歌。

我正在处理的网站上有这个弹出框，而“关闭”按钮不起作用。我的意思是它的工作，但是，命中框区域是他的想法...并且也放置了。您必须单击“关闭”图标上方的一点才能关闭弹出窗口。我正在使用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>

link to the website prototype

Answer 1

不是最优雅的解决方案，但只需将“x”图像设为自己的类，并在顶部应用填充。像下面这样的东西对我有用：

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

使用以下css：

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