使用 calc() 的网格显示额外的像素答案

【问题标题】：Grid using calc() show extra pixels使用 calc() 的网格显示额外的像素
【发布时间】：2015-10-18 10:35:37
【问题描述】：

我使用 Pods 插件创建了一个网格。出于某种原因，每个 div 的底部处都有额外的像素（请参阅空白区域）。我已经多次查看代码，但找不到原因。下面是网格的css。有人知道空白是从哪里来的吗？

链接：http://test.mpluczenik.com/#work

谢谢！

函数.php：

// 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)
}

Pod 模板：

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

CSS：

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

}

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,.75);
width: 100%;
height: 100%;
border:none;
margin:0;
padding:0;

}

div .portfolio-list:hover p {
display:block;
z-index: 9999;
position:absolute;
bottom:50px;
left:0px;
text-align: center;
width:100%;
overflow:hidden;
color:#fff;
margin: 0px;
}


div .portfolio-list:hover a{
color:#fff;
font-weight: bold;
opacity: 50%;
}

谢谢！

【问题讨论】：

太棒了！你会知道为什么会这样吗？

标签： php css

【解决方案1】：

内联块有一个行高，这就是额外空间的来源。您可以通过将line-height: 0 添加到您的css 选择器div .portfolio-list 来删除行高。更多信息here。

【讨论】：