Eliminating vertical/horizontal gaps in a seamless grid of images

Go To StackoverFlow.com


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>
2012-04-04 05:04
by davecave


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.

2012-04-04 16:47
by davecave


Do this to eliminate the vertical white-space that appears in each column:

#photos li img { width: 102% }

For example:

enter image description here

2012-04-04 05:12
by Marty Cortez


remove width columns.css line 101

2012-04-04 05:09
by HDK


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;

  <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>
2012-04-04 05:10
by cereallarceny


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 {
2013-01-11 09:20
by fitz0019