UL-LI forced spacing?

Question

I am trying to make a simple navigation bar.

This is my HTML:

<div id="navbar">
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

and my CSS:

#navbar ul {
    list-style:none;    
}
#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
}

As you can see, the li margin is set to 0px, but there is still spacing between lis. I researched on it, but didn't found anything helpful.

How do I get rid of that spacing? And optionally: What is that spacing?

Answer 1

Whitespace around inline or inline-block level elements?

That spacing comes from the fact that you are treating list items as inline elements: therefore, any whitespace between them will be treated, and collapsed into, a single spacebar character. There are several ways to combat this problem, and Chris Coyier wrote a very good piece about it: http://css-tricks.com/fighting-the-space-between-inline-block-elements/

One way is to remove any whitespace between the <li> elements: be it using HTML comments, or simply removing them outright:

<div id="navbar">
    <ul>
        <li>123</li><!--
        --><li>1234</li>
    </ul>
</div>

or...

<div id="navbar">
    <ul>
        <li>123</li><li>1234</li>
    </ul>
</div>

---

Workarounds

However, I recommend that you consider using floats or the latest CSS3 flexbox specification to create horizontal menus. Both workarounds are available as a code snippet at the end of the answer... but do allow me the luxury to explain the proposed solutions:

Not recommended: using font-size: 0 in parent element

While a quick and easy fix, this solution poses problems for layouts using relative font-sizes, such as % and ems, because the font sizes will be computed relative to the parent's font-size. The ratio, product or division of anything with 0 will give 0. However, if you are using px, rem, vh, vw, vmax or vmin that do not rely on computation based on parent element's font size, it is okay.

Floats

Floats are very useful and more importantly, easy to understand and widely supported across virtually ALL browsers (if IE4.0 can support it, I suspect all browsers today can). However, one issue is that when all immediate descendants of a parent element is floated (like when we float all <li> elements in <ul>), the parent's dimensions will collapse.

A popular fix will be the overflow: hidden (see this article for the detailed mechanistic explanation) or the clearfix solution. The reason is simple: floated elements are taken out of the normal document flow.

CSS3 flexbox specification

It is a rather new standard but allows you tremendous amount of flexibility over conventional CSS floats. The only shortcoming is that the new syntax takes time to learn (although there are many tutorials out there that helps you — this, this and this), and that it is not widely supported on the most common browsers used.

To avoid spacing between elements, you will either have to:

• stretch the elements using flex-grow: 1
• avoid using space-around or space-between for justify-content

...or a combination thereof.

---

Solution demo

Without further ado, here are the two possible workarounds in a code snippet:

ul {
  background-color: #eee;
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
  }
ul li {
  margin: 0;
  }

#navbar1 ul {
  /* To prevent parent collapse when children are floated */
  overflow: hidden;
  }
#navbar1 ul li {
  float: left;
  }

#navbar2 ul {
  display: flex;
  }

<div id="navbar1">
<p>Solution 1: Use floats.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

<div id="navbar2">
<p>Solution 2: Use CSS3 flexbox.</p>
    <ul>
        <li>123</li>
        <li>1234</li>
    </ul>
</div>

Answer 2

Use float instead:

#navbar ul li {
    float: left;
    background:green;
    margin:0px;
}

Answer 3

A simple workaround for this problem, is to use font-size: 0; on the parent and declare a font-size on the <li>.

#navbar ul {
    list-style:none;
    font-size 0; //removes the extra space//
}

#navbar ul li {
    display:inline;
    background:green;
    margin:0px;
    font-size: 12px;
}

The way I personally solve this inline whitespace issue, is to add a negative margin to the <li>'s

#navbar ul li {
    display:inline;
    background:green;
    margin: 0 -4px 0 0; //removes the extra space//
}

And yet another option is to float the child elements, but you need to clear the floats on the parent with overflow: hidden.

#navbar ul {
    list-style- none;
    overflow: hidden; //clear the floats//
}


#navbar ul li {
    margin: 0 5px 0 0; //provides spacing between elements//
    background:green;
    float: left;
}