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

Я пытаюсь создать полноразмерную адаптивную сетку портфолио. Я устанавливаю ширину элементов, используя calc (), и устанавливаю уменьшенное изображение, чтобы оно занимало 100% от эскиза, используя:

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

Это работает, если учесть, что под каждым изображением внутри каждого div.portfolio-списка есть дополнительные 10 пикселей белого цвета, и я не могу понять, откуда он и как от него избавиться. В «элементе проверки» при наведении указателя мыши на список div.portfolio-список div занимает все пространство на 100%, поэтому внутри div происходит что-то, вызывающее дополнительное пространство.
Я заметил, что в режиме «проверить элемент» <a> тег (в котором находится шаблон thumbnail-thumb, в шаблоне Pods) имеет следующие размеры — и дополнительное пространство белого цвета, если оно является частью: 315px x 26px (315px — ширина списка div.portfolio-списка в качестве этого браузера ширина).

Ссылка на визуальное изображение: левый находится при наведении, как вы можете сказать, что наложение включает нижний пустой 10px. Справа внизу вы видите белую полосу.
http://prntscr.com/5yedsp

Ниже приведен код для сетки:

Стручки Шаблон:

<div class="portfolio-list">
<div class="overlay">
<p><a href="{@permalink}">{@post_title}</a></p>
<a href="{@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);
}

Кто-нибудь знает, что вызывает дополнительные 10px под изображением?

Спасибо!