'strange' margins between pictures in css

Question

im making photo gallery on site. Pictures come from database, here's code

@foreach($pics->all() as $pic)
                        @if(file_exists(public_path() . $pic->path))
                            <div class="gal-img-holder col-xs-6 col-sm-4 col-md-4 col-lg-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="{{ asset($pic->path) }}">
                                <a href="" class="sld-img-wrapper">
                                    <div class="wrapper-img-gallery">
                                        <div class="values-inner" style="background-image: url('{{ asset($pic->path) }}'); background-size: cover;"></div>
                                        <img src="{{ asset($pic->path) }}" style="display: none">
                                    </div>
                                </a>
                            </div>
                        @endif
                    @endforeach

but after i added some styles, pictures have some margins, one above another(see printscreen). here's my css(styles i added)

  .wrapper-img-gallery{
    width: 100%;
    display: inline-block;
    position: relative;
}

.wrapper-img-gallery:after{
    padding-top: 80%;
    display: block;
    content: '';
}

.values-inner{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}