How to remove the space between list items [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

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>


Solution :

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.

  1. Get rid of the whitespace

    <li>One</li><li>Two</li>
    
  2. Use comments to make the whitespace a comment JSFiddle

    <li>One</li><!--
    --><li>Two</li>
    
  3. Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle

    <li>One
    <li>Two
    
  4. Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)

    <li>One</li
    ><li>Two</li
    >
    
  5. 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; }
    

    CSS Howto..

    How to set CSS attributes to default values for a specific element (or prevent inheritance)

    How do you align left / right a div without using float?

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    How do I make a paragraph of text display as a square/rectangle in CSS

    How to copy a CSS style from a website for re-use

    Multiline content in a DIV, display only the first line, if clicked, show all and contenteditable

    How to set the width of background-color of a div?

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    Link on Link - How to activate JS code without parent link activation?

    How to make a automatic image slider.?

    How do I get a value from the style element?

    How to set
  • Backgound color?
  • Show Item when Hover Over Parent

    How to reference embedded images from CSS?

    How to morph a plus sign to a minus sign using css transition?

    How to centralise navigation bar

    How can I show part of an element, and toggle to all of the element on click?

    How to change the css and html file at the same time

    How to make a transparent border using CSS?

    How to make an inline-block box stick to the top? [duplicate]

    How do I position this image using CSS so it overlaps a div but displays inline?

    How to sort and combine this css rules so it doesn't repeat so much?

    How to apply remaining width to a div in the middle of 2 other divs

    how to edit input type data with CSS [duplicate]

    How to remove the space between inline-block elements?

    PrimeFaces: how can I make use of customized icons?

    How to make a responsive mosaic css fullscreen width

    How to change css content hover effect background color css php in this situation?

    How to concatenate XHTML files in Java resolving any possible CSS conflicts?

    How to access smarty variable in css URL attribute?