Best Way to Manage Whitespace Between Inline List Items

Best way to manage whitespace between inline list items

Several options here, first I'll give you my normal practice when creating inline lists:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Then the CSS to make it function as you intend:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Obviously I left out the hover and active sets, but this creates a nice block level navigation, and is a very common method for doing this while still keeping with standards. /* remember to tweak to your liking, add color to the background, et cetera */

If you would like to keep it just with text and just inline, no block elements I believe you'd want to add:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Realizing you would like to REMOVE the whitespace, just adjust the margins/padding accordingly.

A space between inline-block list items

I have seen this and answered on it before:

After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.

To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here.

As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.

How to remove the space between inline/inline-block elements?

Alternatively, you should now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Since this answer has become rather popular, I'm rewriting it significantly.

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping
for a CSS solution that doesn't require the HTML source code to be
tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

http://jsfiddle.net/thirtydot/dGHFV/1361/

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).

This is what I, as a reasonably experienced web developer, actually do to solve this problem:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

You can do this, as I usually do:

 <ul>
     <li>Item 1</li><li>Item 2</li><li>Item 3</li>
 </ul>

http://jsfiddle.net/thirtydot/dGHFV/1362/

Or, this:

 <ul>
     <li>Item 1</li
     ><li>Item 2</li
     ><li>Item 3</li>
 </ul>

Or, use comments:

 <ul>
     <li>Item 1</li><!--
     --><li>Item 2</li><!--
     --><li>Item 3</li>
 </ul>

Or, if you are using using PHP or similar:

 <ul>
     <li>Item 1</li><?
     ?><li>Item 2</li><?
     ?><li>Item 3</li>
 </ul>

Or, you can even skip certain closing tags entirely (all browsers are fine with this):
```
 <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
 </ul>
```

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.

small white-space between li items

Add float:left to the below style.

.index-navigation ul li {
    display: inline-block;
    width: 120px;
    padding-top: 13px;
    padding-bottom: 10px;
    background-color: #000;
    text-align: center;
    float: left;
}

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

Spaces between inline list items when code is on separate lines

I'm assuming you
use CSS display: inline to inline your list items?

display: inline does exactly that: it converts your new line in your source code to a space character. You have two options now:

Either you write all your <li> items in one line, then display: inline will actually make your list items behave like you want (no space in-between) - I have set up an example for you here: http://www.jsfiddle.net/NxrQ9/.
Or instead of inlining your elements you just go with display:block and float: left.

HTML inline-block list has unknown spaces in between

You should remove any white-space between the inline-block elements you have. inline-block elements are like inline elements and if you add any white-space between them it will normally show.

Look at this example http://codepen.io/anon/pen/spbtv/

You can have white-space inside your inline-block elements to increase readability.

<ul>
   <li>
       <a href="#">TEST1 <span>2</span></a>
   </li><li>
       <a href="#">TEST2 <span>2</span></a>
   </li><li>
       <a href="#">TEST3 <span>2</span></a>
   </li><li>
       <a href="#">TEST4 <span>2</span></a>
   </li>
</ul>

whitespace between ul and first li gobbled up despite inline-block mode

The whitespace between <ul> and the first <li> is in the DOM, so if you want it to show up, just make the ul display:inline instead of display:inline-block.

Like this:

* {    padding: 0px;    margin: 0px;    display: inline-block;}.people-list {    list-style-type: none;    display:inline; /* Add this line */}.people-list li {    width: 2em;    height: 2em;    background: #f06;    border: 1px solid;}style, script, title {    display:none;}

<tspan>a</tspan><ul class="people-list">  <li></li>  <li></li>  <li></li>  <li></li>  <li></li></ul>

Best Way to Manage Whitespace Between Inline List Items