HTML inline-block list has unknown spaces in between - html

Question

Notice the white border list elements each have a space in between, I cannot figure out where this space is coming from... have tried removing paddings and margins please help.
Link to code: http://codepen.io/anon/pen/rBxwp/

Answer 1

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>
TEST1 <span>2</span>
</li><li>
TEST2 <span>2</span>
</li><li>
TEST3 <span>2</span>
</li><li>
TEST4 <span>2</span>
</li>
</ul>

Answer 2

You can also handle this without having to remove any whitespaces:
ul {
...
font-size: 0;
}
header nav li {
...
font-size: 14px;
}

Answer 3

Mathias is correct. You need to remove the whitespace between the LI items in your markup.
You have:
<li>TEST1 <span>2</span></li>
<li>TEST2 <span>2</span></li>
You need to format it as such:
<li>TEST1 <span>2</span></li><li>TEST2 <span>2</span></li>
The issue is that you've told your LIs to be inline. As inline elements, white space will effect spacing.

Answer 4

To answer your question, you have white space between your <li> tags. White space can affect inline-block elements. So your code needs to be:
<header>
<div class="container">
<div class="col-lg-12 hidden-xs">
<nav>
<ul>
<li>TEST1 <span>2</span></li><li>TEST2 <span>2</span></li><li>TEST3 <span>2</span></li><li>TEST4 <span>2</span></li>
</ul>
</nav>
</div>
</div>
</header>
Notice that the </li> of the previous list item and the <li> of the next list item have no space between them.
However, once you fix this, you will also notice that the border is twice as thick between the elements as on the ends. This may be intentional, but I don't think it is. To fix this, you just remove the border-right style from the <a> tag and add this to your CSS:
header nav li:last-child a {
border-right: 1px solid white;
}
This selects the <a> inside the last <li> and adds a border-right to it.
DEMO

Answer 5

This is a common issue caused by line-breaks in code.
<li>TEST1 <span>2</span>
</li><li>TEST2 <span>2</span>
</li><li>TEST3 <span>2</span>
</li><li>TEST4 <span>2</span>
Here, the closing tag </li> of first list tag and starting <li> are together so browser sees that both are in the same line.
So whenever you see these unnecessary spaces, remove those line-breaks by joining the closing and the starting tags.
Hope this helps!