CSS - Removing Horizontal Space in List Menu Using Display: Inline Property

CSS - removing horizontal space in list menu using display: inline property

I had a remarkably similar question a couple weeks ago.

The horizontal spaces are perfectly reasonable. Between inline elements, whitespace matters. This makes perfect sense when you consider the following markup under generic styles:

<b>Label:</b> <span>content</span>

Wouldn't you feel frustrated if this content rendered as the following?

Label:content

The prevalence of block elements in HTML spoils us into forgetting about the role of whitespace. But we must remember that whenever using inline elements (including inline-block elements), that whitespace in the markup actually does matter since HTML is fundamentally a markup and not a coding language.

There a a few solutions to your problem (assuming you want to hold onto the whitespace in the HTML for aesthetic reasons—if this is not important, just remove the space and be done with it), the easiest of which is to apply font-size: 0px to the parent container and then restore the font size to font-size: 16px or whatever it is in each of the inline elements. This makes it so that the text nodes between them have a font size of zero.

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.

{ text-align: justify; } on horizontal menu. Remove the added space on the right

It´s the whitespace between the last </li> and </ul>. It´s approximately 4px wide with normal fontsize.

this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li></ul>

or this:

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li><!--
--></ul>

will fix it.

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 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 do I reduce the horizontal space between my menu items [Home, About Us,...] is CSS?

Rely on line-height and padding instead of height and width. Try this:

#menu li {
    text-decoration: none;
    float: left;
    display: block;
    text-align: center;
    line-height: 1.5;
    font-family: Tahoma,san-serif;
    font-size: 17px;
    margin: 0;
    padding: 20px 15px;
}

Extra space to left of floated li items in horizontal menu

In .sub-nav, add:

float:left;
position:relative;
left:239px;

In .main-nav, add:

float:left;

Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.

Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.

JSFiddle Demo

UPDATE

In .main-nav, you have:

padding: 2px;

If you remove that and add position and left in .sub-nav, you wouldn't need float property.

JSFiddle Demo

how can I remove the space between buttons on css menu

You have to float the <li>'s left instead of display:inline-block;

 nav ul li {
  float: left; 
  position: relative;

  }

Than you have to calculate the width: of <ul> and fix it and also to <ul> give margin: 0 auto; to center the menu.

nav ul {
width: calculated-width
margin: 0 auto
}

CSS - Removing Horizontal Space in List Menu Using Display: Inline Property