I have added a straightforward dot navigation to the banner of my website. You can check it out HERE. The HTML code I used is shown below:
<ul class="carousel-dots">
<li>
<a href=""></a>
</li>
<li>
<a href=""></a>
</li>
<li class="active">
<a href=""></a>
</li>
</ul>
For the <li>
element, I have the following CSS 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;
}
Despite having margin: 0;
in my style, there seems to be a mysterious margin between the dots. I'm not sure where these spaces are coming from as I want the dots to touch each other directly. What could be causing this unexpected margin?