CSS行间隙像列间隙？答案

【问题标题】：CSS row-gap like column-gap?CSS行间隙像列间隙？
【发布时间】：2016-01-02 20:42:54
【问题描述】：

使用this tutorial，我尝试制作相同的东西，但图像之间存在间隙。所以我只是将 column-gap 属性更改为 3px，但很明显，这只适用于水平方向。有没有像行间隙之类的东西，所以我也可以在图像之间垂直有 3px 的间隙？这是codepen。

column-gap: 3px;
row-gap: 3px /* ??? */

编辑：这个图像网格的工作原理是简单地使用：

line-height: 0;

和

column-count: <any value>
column-gap: 0;

在容器/父级上并带有

width: 100% !important;
height: auto !important;

关于图像/儿童。

HTML

<section id="photos">
<img src="http://www.lorempixel.com/394/205/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/246/306/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/356/398/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/388/367/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/316/354/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/348/216/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/342/371/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/327/201/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/310/225/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/210/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/255/247/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/334/361/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/399/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/288/215/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/216/227/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/311/200/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/371/266/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/362/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/333/220/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/297/374/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/377/342/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/306/243/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/303/223/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/384/238/cats" alt="pretty kitty"><img src="http://www.lorempixel.com/396/272/cats" alt="pretty kitty">
</section>

CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   3px;
   -moz-column-count:    5;
   -moz-column-gap:      3px;
   column-count:         5;
   column-gap:           3px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

编辑 2：我尝试过行高，但它似乎只使用了一半的空间和行高，以及 margin-bottom 和 padding-bottom 会在每列的最底部留下一个额外的空间，并且除此之外，你不能真正改变它们的颜色，虽然border-bottom更适合颜色，但它也会在每列的末尾留下一个空格。

【问题讨论】：

请在问题中发布足够的代码，以便有人在不点击链接的情况下回答此问题。
@Popnoodles 我还用我尝试过的方法编辑了代码笔
您正试图用一个元素构建一个网格。这将会以糟糕的方式结束；我建议使用更多标记来充实网格。

标签： html css

【解决方案1】：

没有行。为图像添加边距。

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-bottom: 3px;
}

【讨论】：

这将在每列的底部创建一个 3px 的空间，我只希望它在图像之间。
我相信您可以弄清楚如何克服这个问题。除了您在链接中提供的内容外，我看不到您的任何布局，因此无法提供帮助。
好吧，我在您的 codepen 中做到了这一点，它在每个图像底部作为边距工作，因此每个图像之间的垂直和水平行是相同的..
也许填充而不是边距更适合您？ ...但是它的外观没有区别，所以我不知道为什么我会建议这样的事情！