mysterious margin for nav dots - html

Question

I have created a very simple dot navigation on my site banner HERE. The HTML code i have used is as follows:
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
</ul>
Now for the <li> element i have the following code:
.banner ul.carousel-dots li {
height: 13px;
width: 13px;
display: inline-block;
background: url(../img/res/carousel-dots.png) 0 0 no-repeat;
margin: 0;
cursor: pointer;
}
Now even though i have margin: 0; in my style, i get a margin between the left and right, i don't know where are these spaces coming from , i would want the dots to be touching each other , side to side. So whats causing this mysterious margin ?

Answer 1

white space between inline-block elements?
The space is actually created by the "enter" between your elements.
How to remove the space between inline-block elements?
In the question above there are a lot of different answers how to remove it.
I set the parent element font-size to 0.
ul {
font-size: 0;
}
ul.carousel-dots li {
height: 13px;
width: 13px;
display: inline-block;
/*background: url(../img/res/carousel-dots.png) 0 0 no-repeat;*/
background-color: black;
border-radius: 50%;
margin: 0;
cursor: pointer;
}
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
</ul>

Answer 2

Ok, the answer is a bit tricky, if you want it fixed, you have to remove the space between the </li> and the next <li>
So, this:
<ul class="carousel-dots">
<li>
</li>
<li>
</li>
<li class="active">
</li>
Should become this:
<ul class="carousel-dots">
<li>
</li><li>
</li><li class="active">
</li>
The reason of this issue is the fact that when using inline-block, spaces are also considered inline characters, leaving space in between.
PS: There are also other ways to remove the space, by using word-spacing or other such things, but I find the simplest solution to be always the best, plus on html you should always try to minimize your code before shipping, so a few lines of code less is always better than a few more