wordpress 投资组合库中图像之间的空间答案

【问题标题】：Space between images in wordpress portfolio gallerywordpress 投资组合库中图像之间的空间
【发布时间】：2013-11-08 08:41:28
【问题描述】：

我正在尝试微调我的 website，但我不知道如何增加我的任何投资组合画廊 (example) 内的图像之间的空间。

我已经浏览了 style.css 文件，但我一定遗漏了一些东西。垂直间距看起来不错，但没有水平间距，并且图像似乎粘在一起。

我正在使用带有“Folio White”主题的 wordpress。

【问题讨论】：

标签： css wordpress image-gallery

【解决方案1】：

只需将此类添加到任何 css 文件中：并将该 css 添加到页眉或页脚以获得最佳效果

.gallery-item {
    margin-top: 0;
    margin-left: 10px;
}

谢谢

【讨论】：

【解决方案2】：

您可以在主题的 style.css 中创建新类

#portfolio-wrap .col{margin-top: 1%;}

【讨论】：

【解决方案3】：

如果您使用右键单击并检查元素，这很容易，您只需将其添加到您的 style.css：

.gallery-item {
    margin-top: 0;
    margin-left: 10px;
}

确保您的样式在插件中使用的样式之前加载。

【讨论】：

汤姆，谢谢！这非常有效 - 我记得以前有时会这样尝试，但只是做错了 - 确实超级容易。
@20Watt：我很高兴，不要忘记检查这个作为问题的答案

【解决方案4】：

对于垂直边距，您可以添加一个类以通过以下方式之一匹配所需的边距：

.only-top {margin-top:5px}
.only-bottom {margin-bottom:5px}
.top-and-bottom {margin-top:5px; margin-bottom:5px}
.overall {margin:5px}
.top-and-bottom-autosides {margin:5px auto}
.specific {margin:5px 4px 5px 4px} //note the order is: top right bottom left

【讨论】：

【解决方案5】：

您可以使用 bootsrtap 方法，例如在行和容器中。这种方法更好，因为它会拉伸容器的画廊宽度。

.gallery {
  margin: -15px;
}

.gallery-item {
  padding: 15px;
}

【讨论】：