Форумы портала PHP.SU :: как убрать отступ у ссылки (или блока)

на фотке 1, у первого элемента есть какой то отступ, это ссылка и она расположена ниже, как убрать это смещение,
попытался добавить vertical-align: middle; к ссылке, оно выровнялось, но сместился span ниже,
ЧТО НЕ ТАК?

CODE (html):
скопировать код в буфер обмена

<section>
        <div class="list-city">
                <div class="list-city-link">
                        <a href="">
                                <img src="/img/cities/paphos.png" alt="paphos">
                                <span>1111</span>
                        </a>
                        <a href="">
                                <img src="/img/cities/larnaca.png" alt="larnaca">
                                <span>22222</span>
                        </a>
                        <a href="">                                     
                                <img src="/img/cities/limassol.png" alt="limassol">
                                <span>333</span>
                        </a>
 
                </div>
        </div>
</section>

CODE (htmlphp):
скопировать код в буфер обмена

 
*{
        margin: 0;
        padding: 0;
        text-decoration: none;
        font-family: Lato, OpenSansRegular, sans-serif;
        font-size: 14px;
}
body{
        color: #000;
        background-color: #fff;
}
section{
        padding-top: 300px;
}
.list-city{
        height: 500px;
        display: block;
        margin: 0 auto;
        width: 1170px;
        text-align: center;
        
}
.list-city>span{
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 40px;
        font-size: 16px;
}
.list-city>span::before{
        vertical-align: middle;
        content: "";
        width: 68px;
        height: 3px;
        background-color: #4eaf45;
        background: linear-gradient(90deg, #05adab, #4eaf45);
        display: inline-block;
        margin-right: 1.3em;
}
.list-city-link{
        margin-bottom: 2em;
}
.list-city-link>a>img{
        display: block;
}
.list-city-link>div{
        height: 311px;
        width: 231px;
        background-color: #999;
}
.list-city-link a, .list-city-link>div{
        display: inline-block;  
        position: relative;
        text-decoration: none;
        /*vertical-align: middle;*/
}
.list-city-link span{
        display: block;
        position: absolute;
        bottom: 0px;
        text-align: center;
        width: 100%;
        background-color: #ffffffad;
        /*opacity: 0.5;*/
        padding: 18px 0 18px 0;
        font-size: 18px;
        font-weight: bold;
        color:#000;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        
}
.list-city-link a:hover span{
        /*height: 100%;*/
        padding: 0;
        padding-top: 60%;
        padding-bottom: 65%;
        font-size: 24px;
}
 

(Отредактировано автором: 06 Ноября, 2019 - 12:12:51)