网格缩略图/项目大小使用计算 ( ）

我正在尝试创建一个全宽响应式投资组合网格。我使用 calc（） 设置项目的宽度，并使用以下命令将缩略图设置为占据缩略图div 的 100%：

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

这有效，除了每个图像下方每个div.portfolio列表内大约有额外的白色10像素之外，我无法弄清楚它来自哪里以及如何摆脱它。在"检查元素"中，当将鼠标悬停在div.portfolio-list 上时，div 会 100% 占用整个空间，因此是div 内部的某些东西导致了额外的空间。我注意到的是，在"检查元素"模式下，<a>标签（投资组合拇指缩略图所在的标签，在 Pod 模板中）具有以下尺寸 - 如果它是其中的一部分，则带有白色额外空间：315px x 26px（315px 是div.portfolio-list 的宽度，因为这个浏览器宽度）。

链接到视觉图像：左侧处于悬停状态，因为您可以说叠加层包括底部空的 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？

谢谢！