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行間隙像列間隙？

回答

相關問題