I am having some trouble creating a seamless photo grid. I have searched the internet for quite a while, and I can't find any solutions.
I have a grid of images that are all square and all the same size. I have eliminated gaps that occur on every row by adding img { vertical-align: middle; }
Now I need to eliminate the vertical white space that occurs in each column.
Here is the site I am working on
Here is a screenshot of the site I am working on
You can see there is about 2-3px of white space the the left and right of the images. I have tried margin:0 and padding:0 on just about everything I can think of.
I have the grid set up using display:inline-block. I need to keep this. I don't want to use floats.
My HTML is pretty simple:
<ul><li><a href="#"><img src="0.jpg" /></a></li></ul>
Thank so much for the quickest response I've ever seen at stackoverflow.
I made a silly mistake though. Since I am using inline-block I forgot that it accounts for whitespace in the HTML. I removed all of the whitespace, and now it seems to work.
@MartinCortez's answers seems to work as well, if I didn't want to fool with whitespace.
Do this to eliminate the vertical white-space that appears in each column:
#photos li img { width: 102% }
For example:
remove width columns.css line 101
Why don't you want to use floats? Here's what I suggest:
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>
I know this is a little late now however I thought I'd share what I would do, as others may find it useful.
As @davecave said it's a whitespace issue but removing the whitespace in the HTML isn't always ideal.
On the containing element I normally do:
#container {
letter-spacing: -4px;
word-spacing: -4px;
}
and on the items that are inline-block reset the values:
.item {
letter-spacing:0;
word-spacing:0;
}