Миниатюра на мрежата/размер на елемент с помощта на calc ( )

Опитвам се да създам адаптивна портфолио мрежа с пълна ширина. Зададох ширината на елементите с помощта на calc() и зададох миниатюрното изображение да заема 100% от миниатюрния div с помощта на:

  `img.attachment-portfolio-thumb{
    width:100% !important;
    height:100% !important;
}`

Това работи, освен че има около допълнителни 10 бели пиксела под всяко изображение, във всеки div.portfolio-list, и не мога да разбера откъде идва и как да се отърва от него. В „inspect element“, когато задържите курсора на мишката над div.portfolio-list, div заема цялото пространство 100%, така че това е нещо вътре в div, което причинява допълнителното пространство. Това, което забелязах е, че в режим „инспектиране на елемент“ тагът <a> (в който се намира миниизображението на портфолио-миниатюра в шаблона на Pods) има следните размери – и бялото допълнително пространство, ако е част от него: 315px x 26px (315px е ширината на div.portfolio-list като тази ширина на браузъра).

Връзка към визуално изображение: Лявото е при задържане, както можете да разберете, че наслагването включва долните празни 10px. Вдясно отдолу виждате бяла лента. http://prntscr.com/5yedsp

По-долу е кодът за мрежата:

Шаблон за капсули:

<div class="portfolio-list">
   <div class="overlay">
   <p><a href="/bg{@permalink}">{@post_title}</a></p>
   <a href="/bg{@permalink}">{@post_thumbnail.portfolio-thumb}</a>
   </div>

PHP:

<section class="portfolio_home_inner">
<section class="portfolio_home">
<?php
    echo do_shortcode ('[pods name="portfolio" template="portfolio-list"]');
?>

/ Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}

CSS:

    div .portfolio-list{
    float:left;
    width: calc(20%);
    overflow: hidden;
    position: relative;
    display: inline-block;
}

/*Wordpress default selector for new image size*/
    img.attachment-portfolio-thumb{
    width:100% !important;
    height:100% !important;
}

div .portfolio-list p{
    display: none;
    color:#000;
}


div .overlay:hover:after {
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(234,79,38,.85);
}

Някой знае ли какво причинява допълнителните 10 пиксела под изображението?

Благодаря ти!