css中图片之间的“奇怪”边距

Question

我在网站上制作照片库。图片来自数据库，这里是代码

@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

但是在添加了一些样式之后，图片有一些边距，一个在另一个之上（参见printscreen）。这是我的CSS（我添加的样式）

  .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;
}