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

Question

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

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

Это работает, если учесть, что под каждым изображением внутри каждого div.portfolio-списка есть дополнительные 10 пикселей белого цвета, и я не могу понять, откуда он и как от него избавиться. В "элементе проверки" при наведении указателя мыши на список div.portfolio-список div занимает все пространство на 100%, поэтому внутри div происходит что-то, вызывающее дополнительное пространство. Я заметил, что в режиме "проверить элемент" <a> тег (в котором находится эскиз портфолио-большого пальца в шаблоне модулей) имеет следующие размеры - и дополнительное пространство белого цвета, если оно входит в него: 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 под изображением?

Спасибо!

Answer 1

Ваше изображение имеет запас 32px 0 15px (проверьте элемент с помощью хрома) для класса ".image_pic". Установка image_pic "margin-bottom: 0;" должен разобраться для вас, возможно, с важным тегом.