mysterious margin for nav dots

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>
        <a href=""></a>
    </li>
    <li>
        <a href=""></a>
    </li>
    <li class="active">
        <a href=""></a>
    </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 ?

It is a probels and tabs from your source code. Check view-source:http://codeandcode.co/demo/dots-error/main.html. `display: inline-block;`Read https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — 0x860111, Jan 16 '16 at 11:26

score 3 · Accepted Answer · edited May 23 '17 at 12:15

3

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>
    <a href=""></a>
  </li>
  <li>
    <a href=""></a>
  </li>
  <li class="active">
    <a href=""></a>
  </li>
</ul>

edited May 23 '17 at 12:15

Community

1
1

answered Jan 16 '16 at 11:26

Persijn

13,675
2
40
70

Or, for a more practical approach, [just use flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). It was designed for this. – Niels Keurentjes Jan 16 '16 at 11:29
@NielsKeurentjes , iam in the process of migrating to that ;) – Alexander Solonik Jan 16 '16 at 11:30

score 2 · Answer 2 · answered Jan 16 '16 at 11:27

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>
    <a href=""></a>
</li>
<li>
    <a href=""></a>
</li>
<li class="active">
    <a href=""></a>
</li>

Should become this:

<ul class="carousel-dots">
<li>
    <a href=""></a>
</li><li>
    <a href=""></a>
</li><li class="active">
    <a href=""></a>
</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

mysterious margin for nav dots

2 Answers2

white space between inline-block elements?