需要删除图像下方的空格

Question

我需要删除图片下方的空格，如下所示：http://www.sugarkandy.com/category/electronics/

我正在使用 Wordpress，并且在 style.css 方面做了很多工作，但没有成功。 玩过各种图像尺寸、类型等，但不能删除这个空白。 图像使用瓷砖，瓷砖部分的 css 代码是：

    /* Homepage Tiles
    ----------------------------------------------- */

    /**
    * Grid container
    */
   #tiles {
    list-style-type: none;
    position: relative; /** Needed to ensure items are laid out relative to this         container **/
    margin: 0;
          }

/**
 * Grid items
 */
   #tiles li {
    width: 220px;
    background-color: #ffffff;
    border: 1px solid #dedede;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    display: none; /** Hide items initially to avoid a flicker effect **/
    cursor: pointer;
    padding: 4px;
             }

   #tiles li img {
    display: block;
                 }

我对 HTML 不太熟悉，花了很多时间试图找到解决方案，但没有成功。

此外，目前单击图像标题会打开颜色框弹出窗口 - 是否可以通过单击图像上的任意位置来打开弹出窗口？就像 Wordpress 的主题部分一样（在更改、激活或停用主题时）。

非常感谢您的帮助。

谢谢， 索拉布

Answer 1

从每个产品中删除 html 代码 <p class="link-btn"></p> 应该可以工作，如果它在 wordpress 中，您可以引用该类并使用 {display:none;} 隐藏它。

Answer 2

据我所知，您的 div 容器中似乎有一个空的 p 标签，它有一个“view view-first”类。然后你的 style.css 中有一个 .view p 类，它有一个填充：10px 20px 20px;。这就是为什么你有空格。删除空的 p 标记，如果其他地方不需要它，就去掉 .view p 的类。

添加显示：块；和高度：100%；到类掩码下的标签，使整个图像在您悬停并单击时可选择。

Answer 3

你必须删除这部分代码：

<p class="link-btn"></p>

你似乎不需要它。

对于您问题的第二部分，如果您希望在单击整个图像时弹出颜色框，您必须在图像上应用与图像标题相同的行为。我不知道你那边是怎么做到的。在 HTML 中是：

<a href="your_link"><img src="your image" /></a>

在 jQuery 中它会给你类似的东西：

$('.myclass').onClick(function() {
// code to display the pop up
});

myClass 是一个类，您必须将其应用于图像和图像标题。