How to remove the space between list items

Question

How to you get rid of the white space between list items? I am trying to make it so that the images are right next to each other. Even though I have set the styling to margins: 0;, they are still separated.

CSS

ul.frames{
  margin: 20px;
  width: 410px;
  height: 320px;
  background-color: grey;
  float: left;
  list-style-type: none;
}

ul.frames  li {
  display:inline;
  margin: 0;
  display: inline;
  list-style: none;
}

ul.frames li img {
  margin: 0 0 0 0;
}

HTML

<li>
  <img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
  <img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>

Answer 1

Updated Sept. 1st, 2014

In modern browsers, flex-box is the preferred method of doing this. It's as simple as:

ul {
  display: flex;
}

See a JSFiddle here.

For legacy browser support refer to the other options below, which are still just fine, albeit slightly more complex.

---

Though each of the other answers gives at least one good solution, none seem to provide all of the possibilities. And that's what I'll try to do here.

Firstly, to answer your implicit question of why there's spacing, it's there because you've set your LIs to display as inline elements.

inline is the default display value for text and images in all of the browsers that I know of. Inline elements are rendered with spacing between them whenever there's whitespace in your code. This is a good thing when it comes to text: these words that I've typed are spaced apart because of the space I've included in the code. And there's also space between each line. It's this very behavior of inline elements is what makes text on the web readable at all.

But sometimes we want non-text elements to be inline to take advantage of other properties of this display style. And this typically includes a desire for our elements to fit snugly together, quite unlike text. And that seems to be your problem here.

Without further ado, here are all the ways I know of to get rid of the spacing:

Keeping them inline

1. (Not recommended) Apply negative margin to the LIs to move them over.

   li { margin: -4px; }
   

Note that you'll need to 'guess' the size of a space. This isn't recommended because, as Arthur excellently points out in the comments below, users can change the Zoom of their browser, which would more than likely mess up the rendering of your code. Further, this code requires too much guesswork and calculation. There are better solutions that work under all conditions.

2. Get rid of the whitespace

   <li>One</li><li>Two</li>
   

3. Use comments to make the whitespace a comment JSFiddle

   <li>One</li><!--
   --><li>Two</li>
   

4. Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle

   <li>One
   <li>Two
   

5. Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)

   <li>One</li
   ><li>Two</li
   >
   

6. Take advantage of the fact that the spacing between the elements is calculated as a percentage of the font size of the parent. Consequently, setting the parent's font size to 0 results in no space. Just remember to set a non-zero font-size on the li so that the text itself has a nonzero font size. View on JSFiddle.

Floating them

1. Float them instead. You'll probably want to clearfix the parent if you do this.

   li { float: left; display: block; }
   

Answer 2

Incredible but no one here has provided the proper solution for this problem.

Just do this:

ul.frames {
  font-size: 0;
}
ul.frames li {
  font-size: 14px; font-size:1.4rem;
  display: inline;
}

Keep in mind that we won't always have access to modify the markup. And trying to remove the spaces from the <li>s with JavaScript would be totally unnecessary when the solution is simply two font-size properties.

Also, floating the <li>s introduces another potential problem: You wouldn't be able center and right align the list items.

If you try to do float:right; on the <li>s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.

Check out this other post here in SO: A Space between Inline-Block List Items

Answer 3

You should just remove all the spaces in the ul tags just like this: http://jsfiddle.net/dFRYL/3/

Since the <li> elements are inline, in you write spaces in or between them you will have spaces displayed.

Answer 4

The reason you get the spaces is because you have spaces between the elements (line break)

<ul>
     <li>One</li><li>
     Two</li><li>
     Three</li>
</ul>

Answer 5

You can use negative margins like this:

margin-right: -4px;
margin-bottom: -4px;

Take a look here.

It also works up and down, I added another one to show that here.

Answer 6

Using display:inline; causes whitespace in your HTML to create whitespace when displaying the HTML.

There are two solutions to this:

1) Change how you make them appear inline, I would recommend using floats on all of the list items, then using a clearfix of sorts.

2) Remove all whitespace between your list items, e.g.

<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>

Personally I would recommend option 1 (I hate display: inline)

Answer 7

here is my attempt at it. Hope it helps. As Sean Dunwoody mentioned, white space in your html can be a cause of the space, but I've floated the li and made the image to display:block;. Left comment on where I made changes. Hope it helps: http://jsfiddle.net/FJ3nV/

Here my small but main changes:

/*
* Added float left
*/
ul.frames  li {
  margin: 0;
  list-style: none; 
  float:left;
}

/* 
*  Moved inline sizing here just to clear up obtrusive html.
*  Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}

Answer 8

I would change your li elements to inline-block.

One person did not recommend

li { margin: -4px; }

But making a slight change to it will cause it to work even when the font size changes or when the browser zooms in

li{ margin-right: -0.25em; }

That should fix that white space problem completely. However, if you are using a poorly designed font-face that doesn't follow correct letter-height standards then it may cause a problem. However those are harder to find and most of the fonts google hosts don't have that issue.