How to Remove The Space Between List Items

How to remove the space between list items

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

(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.

Get rid of the whitespace
```
<li>One</li><li>Two</li>
```
Use comments to make the whitespace a comment JSFiddle
```
<li>One</li><li>Two</li>
```
Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle
```
<li>One
<li>Two
```
Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)
```
<li>One</li
><li>Two</li
>
```
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

Float them instead. You'll probably want to clearfix the parent if you do this.
```
li { float: left; display: block; }
```

How to remove space between list items in navigation (HTML / CSS)

These spaces are actually caused by the white space in your html.

To solve, add float: left to your <li> tags:

.nav li {
    float: left;
}

To see that it really is the whitespace in your HTML, try removing it and testing:

.nav {    list-style: none;    margin: 0;    padding: 0;    text-align: center;}.nav li {    display: inline;    margin: 0px;}nav ul.nav {    width: 1120px;    margin: 0 auto;    min-width: 120px;}span.homeicon {    width: 35px;    height: 32px;    display: inline-block;    vertical-align: middle;    position: relative;    background-image: url('http://s16.postimg.org/cq68hbikx/home_icon.png');    background-size: cover;}.nav a {    display: inline-block;    padding: 10px;    width: 120px;    text-decoration: none;    font-family: arial;    line-height: 30px;    height: 30px;    margin: 0px;    border: 1px solid #344da7;}a.nav_home {    max-width: 50px;    width: 50px !important;}.nav a:hover {    background-color: #344da7;    height: 100%;}

<nav>  <h1> With Whitespace </h1>  <ul class="nav">    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li>      <li><a href="">SPORTS</a></li>    <li><a href="">LIVE CASINO</a></li>    <li><a href="">SLOTS</a></li>    <li><a href="">POKER</a></li>    <li><a href="">PROMOTION</a></li>    <li><a href="">BANKING</a></li>    <li><a href="">AFFILIATE</a></li>  </ul>    <h1> Without Whitespace </h1>  <ul class="nav">    <li><a href="" class="nav_home"><span class="homeicon"></span></a></li><li><a href="">SPORTS</a></li><li><a href="">LIVE CASINO</a></li><li><a href="">SLOTS</a></li><li><a href="">POKER</a></li><li><a href="">PROMOTION</a></li><li><a href="">BANKING</a></li><li><a href="">AFFILIATE</a></li>  </ul></nav>

How do I reduce the vertical space between list items in an unordered list?

Further to all the other answers, it might be worth setting line-height: 1em; to reduce the leading space of each line. Of course, the padding-top, padding-bottom, margin-top and margin-bottom are all the most-likely culprits.

How to remove space between li elements?

I suggest to use CSS multi-columns over flexbox in that case. And adjust the padding and margin on the li as needed.

ol {
  column-count: 2;
}

.main-info {  background-image: url("https://preview.ibb.co/hZw69K/drone.png");  background-position: right center;  background-repeat: no-repeat;}
ol {  column-count: 2;  counter-reset: li;}
ol>li {  position: relative;  list-style: none;  display: inline-block;  vertical-align: top;  margin: 21px 0 57px 2em;  padding: 22px 41px;}
ol>li::before {  content: counter(li);  counter-increment: li;  position: absolute;  top: -2px;  left: -2em;  box-sizing: border-box;  width: 54px;  height: 54px;  border-radius: 50%;  margin-right: 8px;  padding: 17px;  border: 1px solid rgb(63, 78, 118);  background: #fff;  font-weight: bold;  font-family: proximaNova;  text-align: center;}

<section class="info-section">  <div class="main-info">    <h2>Nature from air</h2>    <p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>    <ol class="info-list">      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>      <li>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</li>    </ol>  </div></section>

CSS : How to remove margin between <li>

Change margin in "ul.tabs li" to a negative number. -3 gets rid of them, -2 makes them real small.

css / html - remove space before li tag

set padding-right: 0; on your ul

.menu {
    padding-right: 0; 
}

How to remove space between paragraph and specific html list

Paragraphs cannot contain ul so you need to change the HTML.

Then just remove margins from both.

  p, p + .nospaceabovelist {  margin: 0;  padding: 0;}

<p><strong>Reason</strong><br/> As part of the change from the NHS, the following drugs are unable to be prescribed by the doctor and requires a special consultant to prescribe these medications:</p><ul class="nospaceabovelist">  <li>Clonazepam</li>  <li>Imitrex</li>  <li>Amoxil</li>  <li>Sensipar</li></ul>

How to get rid of white space between css horizontal list items?

You need to use display:block and float:left on the lis to remove the space. When they're inline the browser treats them as words, and so leaves space in between.

Also see my similar question.

How to Remove The Space Between List Items