消除無縫網格圖像中的垂直/水平間隙

我在創建無縫照片網格時遇到了一些麻煩。我在互聯網上搜索了很長時間，我找不到任何解決方案。消除無縫網格圖像中的垂直/水平間隙

我有一個網格的圖像都是正方形和所有相同的大小。我已經消除了每行上發生的間隙，通過添加img { vertical-align: middle; }

現在我需要消除每列中出現的垂直空白。

Here is a screenshot of the site I am working on

你可以看到有白色的空間約2-3px圖像的左側和右側。我已經嘗試了幾乎所有我能想到的東西margin:0和padding:0。

我使用display:inline-block設置了網格。我需要保持這一點。我不想使用浮動。

我的HTML是非常簡單的：

<ul><li><a href="#"><img src="0.jpg" /></a></li></ul>

來源

2012-04-04 davecave

感謝這麼多我在堆棧中看到的最快速的響應。

雖然我犯了一個愚蠢的錯誤。由於我使用inline-block，我忘了它在HTML中佔了空白。我刪除了所有的空白，現在它似乎工作。

@ MartinCortez的答案似乎也適用，如果我不想用空白來欺騙。

來源

2012-04-04 16:47:08 davecave

刪除寬度columns.css線101

來源

2012-04-04 05:09:16 HDK

爲什麼你不希望使用花車？這裏是我的建議：

ul { overflow: auto; width: XXXpx; } 

li { 
    float: left; 
    width: XXXpx; 
    margin: 0px; 
    padding: 0px; 
    outline: 0px; 
} 



<ul> 
    <li><a href="#"><img src="img1.jpg" alt=""></a></li> 
    <li><a href="#"><img src="img2.jpg" alt=""></a></li> 
    <li><a href="#"><img src="img3.jpg" alt=""></a></li> 
</ul>

來源

2012-04-04 05:10:33 cereallarceny

這樣做是爲了消除出現在每個柱垂直空白：

#photos li img { width: 102% }

例如：

enter image description here

來源

2012-04-04 05:12:51

我知道現在有點晚了，但我想我會分享我會做的事，因爲其他人可能會覺得它有用。

由於@davecave說這是一個空白問題，但刪除HTML中的空白並不總是理想的。

在含元件I通常做：

#container { 
    letter-spacing: -4px; 
    word-spacing: -4px; 
}

和上是內聯塊重置值的項目：

.item { 
    letter-spacing:0; 
    word-spacing:0; 
}

來源

2013-01-11 09:20:20 fitz0019

消除無縫網格圖像中的垂直/水平間隙

回答

相關問題