CSS行间隙像列间隙？

使用this tutorial，我试着做同样的事情，但图像之间存在差距。所以我只是将列间距属性更改为3px，但很明显，它只能水平工作。是否有任何东西像行距或任何东西，所以我也可以在图像之间垂直3px间隙？这是codepen。CSS行间隙像列间隙？

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：我已经试过行高，但似乎只使用一半的空间和行高以及边距和填充底部会在每列的最底部留下额外的空间，除此之外，您无法真正改变它们的颜色，尽管边框底部对于颜色来说会更理想，但是它也会留下空间每列的结尾也是如此。

来源

2016-01-02 super

请在问题中发布足够的代码，以便有人回答这个问题，而无需点击链接。 – Popnoodles

@编辑面条。 – super

@Popnoodles我也编辑了codepen，用我试过的 – super

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

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

来源

2016-01-02 20:45:22 Popnoodles

这将在每列的底部创建一个3像素的空间，我希望它只在*图像之间。 – super

我相信你可以弄清楚如何克服这一点。我看不到你的布局比你在链接中给出的更多，所以我无法提供帮助。 – Popnoodles

嗯，我做了你的代码和它的工作作为边缘在每个图像的底部，所以每一个图像之间的行垂直和水平是相同的。 –

CSS行间隙像列间隙？

回答

相关问题