How to remove top / bottom margin from isotope masonry

Question

I am using the isotope masonry gallery but finding it hard to remove the top / bottom gaps between the rows (see image)

How can I go about this?

The code I'm using is based on the following: http://simbyone.com/animated-masonry-gallery-with-filters/

As mentioned, I am using the code directly from that url above including the javascript and css. The html for the images is created using php but outputs as follows:

    <div id="gallery-content">
    <div id="gallery-content-center">
                        <div class='wrapper suggestion all film any later' id='3'>
                            <span class='relevance'>
                                <span class='badge'>87%</span>

                            </span>
                                <img src='cabinet/item/img/3.jpg' class='all film any later' alt='Film 1'/>
                            <span class='text'><i class='fa fa-check-circle-o btn-icon up'></i> <i class='fa fa-times-circle-o btn-icon down'></i> <i class='fa fa-heart-o btn-icon fav'></i><br>Film 1 later</span>
                        </div></div></div>

I am also using hover text over the images:

        .wrapper img {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);  /* For Webkit browsers */
        filter: gray;  /* For IE 6 - 9 */
        -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */
    }

    .wrapper img:hover {
        filter: grayscale(0%);
        -webkit-filter: grayscale(0%);
        filter: none;
    }

    .wrapper .text {
        position:relative;
        bottom:65px;
        left:10px;
        width: 150px;
        overflow: visible;
        visibility:hidden;
        color: #fff;
        font-size: 20px;
    }

    .wrapper:hover .text {
        visibility:visible;
    }

    .wrapper .relevance {
        position:relative;
        top:30px;
        left:250px;
        visibility:hidden;
        color: #a9a9a9;
        z-index: 99999;
    }

    .wrapper:hover .relevance {
        visibility:visible;
    }

    .wrapper .relevance .badge {
        font-size: 16px;
        background-color: #333;
    }

EDIT: It seems that if I apply a height to .wrapper it deals with it but as the height of the image will vary I can't seem to wrap it tightly to the image within it. any suggestions how I can do this as height: auto just leaves me with what I have already

Answer 1

I have found a work around though I'm not 100% if it is the way to go but I added margin-bottom: -25% to all images and it appears to have done the trick. May not fit all situations but time will tell

#gallery-content-center img {
  width: 100%;
  height: auto;
  margin-bottom: -25%;
}